@charset "UTF-8";
/* ==========================================================================
   Dark skin
   ========================================================================== */
/* Colors */
/* dark syntax highlighting (base16) */
.author__urls.social-icons .svg-inline--fa,
.page__footer-follow .social-icons .svg-inline--fa {
  color: inherit;
}

/* ==========================================================================
   Variables
   ========================================================================== */
/*
   Typography
   ========================================================================== */
/* paragraph indention */
/* system typefaces */
/* sans serif typefaces */
/* serif typefaces */
/* type scale */
/* headline scale
   The theme's own scale, restored. It was briefly compressed to make section
   headings smaller, but the headings that were actually too large were the
   setext `===` h1s inside rendered markdown, which the page-title rule was
   capturing — see .rendered-markdown in extra_main.scss. That is fixed at the
   source, so the scale needs its full range back: content headings are shifted
   down one level and need somewhere to step to. */
/* dense-UI type ladder
   The $type-size scale above is em-based and sized for running prose. The
   admin console, error log and collaboration-project surfaces are dense
   application UI whose labels, badges and meta lines all sit below body size;
   left ungoverned they had accumulated 34 distinct font-size values. These are
   rem so they track the root size steps ($doc-font-size-medium/large/x-large)
   instead of compounding against whatever parent they land in. */
/*
   Colors
   ========================================================================== */
/* accent — used for callouts/highlights across page/people/publi */
/* page-title accent — $accent-color pulled toward the foreground.
   Raw $accent-color on $background-color fails the 3:1 large-text floor on six
   of the eleven shipped skins (contrast 1.27:1, default 2.05:1, air 2.36:1,
   mint 2.51:1, aqua 2.65:1, sunrise 2.86:1), so a display-scale heading cannot
   use it directly. 60% is the most accent this mix can carry while the worst
   skin still clears 3:1 (contrast, 3.51:1); it darkens on light skins and
   lightens on dark ones, the same construction as $link-color. */
/* hero scrim strength — multiplier on the darkening layer under hero overlay
   text. Declared here so every skin compiles; a skin may override it. 0 removes
   the scrim entirely, which will fail contrast over a light hero image. */
/* project status badges */
/* project category (mindmap + cards) */
/* avatar palette — deterministic hash slot -> color */
/* raised-surface ladder
   Six semantic steps for application chrome: a resting raised fill, one
   nested step above it (card header strips), a translucent hover tint, and
   three hairline weights. Ten separate rgba($text-color, …) alphas served
   these intents before, several of them relying on translucency stacking
   through nested elements.

   The fills are opaque mixes rather than rgba: a card, panel or popover must
   read the same whether it sits on the page, inside another surface, or over
   the content it overlays. Only $surface-hover stays translucent, because
   pointer feedback should tint whatever it lands on. Mixing $text-color into
   $background-color also means one token lightens on dark skins and darkens on
   light ones, instead of a #fff-derived value that vanishes on the light skins. */
/* The control-boundary step. A 1px edge is what identifies a tonal control
   whose fill is only an 8% lift off the page, and WCAG 1.4.11 asks 3:1 of it.
   $hairline-strong does not carry that: at 38% it measures 2.01:1 on aqua and
   mint, 2.09 on dirt, 2.18 on air — seven of the nine distinct skins fail. 60%
   is the lowest weight that clears 3:1 on all of them (worst: aqua and mint at
   3.33). Reach for it on a control outline, not on a divider. */
/* collaboration-project surface tokens
   Aliases onto the ladder above — the collab views reference these names ~60
   times, and they used to be mixed against #fff, which collapsed to invisible
   on the light skins ($proj-surface resolved to #fff on a #fff page). */
/* 80%, not the 50% this started at: this token carries running text — meta
   lines, card header strips, the admin console's tile links — and 50% put all
   of it below 4.5:1 on every one of the eleven skins (aquila_dark measured
   3.34:1 on $surface-raised, 2.87:1 on $surface-raised-alt). 80% is the lowest
   weight that clears the body floor on both raised steps for ten skins; the
   eleventh, mint, needed its own $text-color deepened, since no mix weight can
   recover contrast its root colour never had. See DESIGN.md → Colors. */
/* photo overlays
   Chrome that sits on top of an image (thumbnail captions, remove buttons,
   progress tracks). These stay absolute black: they must darken a photograph,
   not the page, so they are the one place skin derivation would be wrong.
   0.55 is the measured hero-scrim value — see .hero--main-bg. */
/* inline emphasis (filename patterns, download counts)
   The link tint rather than a fresh hue, so emphasised inline text keeps its
   contrast on every skin instead of relying on a hardcoded teal or yellow. */
/* YIQ color contrast */
/* brands */
/* links */
/* notices */
/* syntax highlighting (base16) */
/*
   Breakpoints
   ========================================================================== */
/*
   Grid
   ========================================================================== */
/*
   Other
   ========================================================================== */
/* One radius drives the system. The three names below are the only sanctioned
   variations: the doubled step for pill-shaped controls (the authors-panel
   select precedent), a fully rounded chip, and a circle for avatars and dots.
   Anything else — 3px, 5px, 0.375rem — is drift, not a decision. */
/* Feedback on a control the pointer is already on — hover fills, border tints.
   Replaces the 0.1s/0.12s/0.15s trio that had drifted apart for one intent. */
.reading-pref {
  display: flex;
  justify-content: flex-end;
}

.reading-pref__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0 0.6rem;
  margin-inline-end: -0.6rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: rgb(174.9, 176.4, 179.4);
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.reading-pref__toggle:hover {
  color: #eaeaea;
  border-color: rgb(80.6, 84.6, 92.6);
}
.reading-pref__toggle:focus-visible {
  outline: 2px solid #00adb5;
  outline-offset: 2px;
}

.reading-flush .reading-pref__toggle {
  color: #eaeaea;
  background: rgb(52.76, 57.36, 66.56);
  border-color: rgb(80.6, 84.6, 92.6);
}

body {
  counter-reset: figure_counter;
}

#main {
  text-align: justify;
  margin-bottom: 8em;
}
@media print {
  #main {
    font-size: 11pt;
    line-height: 1.25em;
  }
}
#main img.inline-logo, #main span.inline-logo.svg {
  height: 1em;
  color: white;
}
#main span.inline-logo.svg {
  display: inline-block;
}
#main span.inline-logo.svg svg {
  height: 100%;
}
#main div.footnotes {
  font-size: 1.563em;
}
#main div.footnotes::before {
  content: "References and links";
  font-weight: bold;
  color: #f99;
}
#main div.footnotes ol li, #main div.footnotes ol li p {
  font-size: 22px;
  margin-top: 0.2em;
}
#main .underline {
  text-decoration-line: underline;
  font-weight: normal;
}

/*
   Reading preference

   `#main` above justifies its text across the full 1280px content width — about
   113 characters at the $x-large root. That is the intended default: the figures
   are 512px (1024px for `.wide`) and centred, and a text column capped short of
   them left the page reading as two different documents stacked on each other.

   WCAG 2.2 SC 1.4.8 (Visual Presentation, AAA) does not ask for that default to
   change; it asks for a *mechanism* by which a reader can get a line no wider
   than 80 characters and text that is not justified. This is that mechanism —
   one control (partials/reading_pref.mustache) setting one class on <html>,
   delivering both halves at once, because the two are the same reading problem:
   justification distributes its slack over the whole measure, so a shorter line
   is what makes an unjustified line unnecessary and a justified one bearable.

   The class is set in <head> before the first paint and persists in
   localStorage, so it is a preference for the reader rather than a per-page
   gesture. It is scoped to this stylesheet, which is loaded by the pages whose
   frontmatter says `layout: page` — the same pages that get `#main`'s
   justification above, since that rule lives here too. A post declaring
   `layout: post` would load posts.css instead and get neither.
   ========================================================================== */
.rendered-markdown p:not(.figure),
.rendered-markdown li,
.rendered-markdown dd,
.rendered-markdown blockquote {
  hyphens: auto;
}

.reading-flush #main {
  text-align: start;
}
.reading-flush .rendered-markdown {
  max-width: 70ch;
  margin-inline: auto;
}
@media print {
  .reading-flush .rendered-markdown {
    max-width: none;
  }
}
.reading-flush .reading-pref {
  max-width: 70ch;
  margin-inline: auto;
}

/*
   Reading-preference control
   ========================================================================== */
.reading-pref {
  margin: -0.25rem 0 0.75rem;
}
html:not(.js) .reading-pref {
  display: none;
}
@media print {
  .reading-pref {
    display: none;
  }
}

.reading-pref__icon--justified,
.reading-pref__label--justified {
  display: none;
}

.reading-flush .reading-pref__icon--flush,
.reading-flush .reading-pref__label--flush {
  display: none;
}
.reading-flush .reading-pref__icon--justified,
.reading-flush .reading-pref__label--justified {
  display: inline;
}

@media print {
  h1 {
    font-size: 17pt;
    color: black;
  }
  h2 {
    font-size: 15pt;
  }
  h3 {
    font-size: 13pt;
  }
}
div.figure, p.figure {
  display: block;
  margin-left: auto;
  margin-right: auto;
  counter-increment: figure_counter;
}
@media screen {
  div.figure, p.figure {
    border: 1px solid rgb(80.6, 84.6, 92.6);
    border-radius: 5px;
    box-shadow: 3px 3px 2px rgb(80.6, 84.6, 92.6);
  }
}
@media print {
  div.figure, p.figure {
    page-break-inside: avoid;
  }
}
div.figure div.holder_video, p.figure div.holder_video {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  max-width: 512px;
  width: 100%;
}
div.figure img, p.figure img {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
}
@media screen {
  div.figure img, p.figure img {
    max-width: 512px;
    width: 100%;
  }
}
@media print {
  div.figure img, p.figure img {
    width: 10cm;
  }
}
div.figure div.holder_video + em, div.figure img + em, p.figure div.holder_video + em, p.figure img + em {
  display: block;
  margin-left: 1em;
  margin-right: 1em;
}
div.figure div.holder_video + em:before, div.figure img + em:before, p.figure div.holder_video + em:before, p.figure img + em:before {
  content: "Figure " counter(figure_counter) " : ";
  text-decoration: underline;
}

p.figure.wide img {
  max-width: 1024px;
}
@media print {
  p.figure.wide img {
    width: 18cm;
  }
}

p.figure.whitebg img {
  background-color: white;
}

.page-footer--alternate-location {
  text-transform: uppercase;
  font-weight: bold;
}
.page-footer--alternate-location a img {
  background-color: white;
  height: 1em;
}

.jobad {
  background-color: rgb(17.7, 46.8, 55.8);
  margin: 1em;
  padding-left: 1em;
  padding-right: 1em;
  border: solid #3b9cba;
  border-radius: 1em;
}
.jobad a a:visited {
  color: #3b9cba;
}
.jobad a:hover {
  color: rgb(225.6, 240.15, 244.65);
}
.jobad .jobtitle {
  display: block;
  height: 120%;
  font-weight: bold;
  margin-bottom: 1em;
}
.jobad p {
  margin-top: 0.1em;
  margin-bottom: 0.1em;
}
.jobad ul {
  margin: 0em;
}
.jobad ul li {
  margin: 0;
}

.pagination {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin: 1.5rem 0;
}

/*# sourceMappingURL=page.css.map */