/* 00-tokens.css */
/* Structural tokens. Colour and font tokens are emitted into <head> from the theme
   configuration (see scripts/helpers.js: theme_tokens_css). */
:root {
  --theme-color: var(--masthead);
  --column-width: 760px;      /* content pages and mastheads */
  --reading-width: 39.667rem; /* article text column (634.67px at the 1280px reference width) */
  --photo-width: 1080px;      /* posts with several photographs */
  --wide-width: 1160px;       /* wide pages such as a gallery */
  --masthead-height: 216px;
  --masthead-height-mobile: 176px;
}

.home-root {
  --theme-color: var(--home-nav);
}

/* 01-base.css */
/* Minimal base: only the defaults that shape the visible design. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  letter-spacing: var(--letter-spacing, 0.02em);
  -webkit-text-size-adjust: 100%;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  background-color: var(--paper);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

body.mobile-menu-open,
body.lightbox-open,
body.search-dialog-open {
  overflow: hidden;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul, ol, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ul ul, ol ol, ul ol, ol ul {
  margin-bottom: 0;
}

figure {
  margin: 1rem 0;
}

img {
  max-width: 100%;
  vertical-align: middle;
  border-style: none;
  filter: brightness(var(--image-brightness, 1));
  transition: filter 0.2s ease-in-out;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

a {
  color: var(--text);
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

a:hover {
  color: var(--link-hover);
  text-decoration: none;
}

strong, b {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

sub, sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

hr {
  box-sizing: content-box;
  height: 0;
  margin: 1rem 0;
  overflow: visible;
  background-color: initial;
  border: 0;
  border-top: 1px solid var(--line);
  transition: border-top-color 0.2s ease-in-out;
}

code, kbd, pre, samp {
  font-family: var(--font-mono);
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

code {
  color: inherit;
  overflow-wrap: break-word;
}

table {
  color: var(--prose);
  font-size: inherit;
  border-collapse: collapse;
}

th {
  text-align: inherit;
}

button, input, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button {
  border-radius: 0;
  text-transform: none;
  -webkit-appearance: button;
  appearance: button;
  cursor: pointer;
}

label {
  margin-bottom: 0;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar);
  border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--scrollbar-hover);
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}

.icon {
  width: 1em;
  height: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.noscript-warning {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  width: 100%;
  padding: 0.5rem;
  color: #fff;
  background-color: #b3453c;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
}

/* 10-nav.css */
/* Site navigation stays at the top of the document and scrolls with the masthead.
   Only the open mobile menu is fixed to the viewport. */
.site-header {
  position: relative;
}

.site-nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  padding: 0.5rem 1rem;
  background-color: transparent;
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

@media (min-width: 600px) {
  .site-nav {
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

.site-nav--open {
  background-color: var(--masthead);
}

.home-page .site-nav {
  background-color: var(--home-nav);
}

.site-nav__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

.site-nav__brand {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.3125rem 0;
  color: var(--nav-text);
  font-size: 1.25rem;
  font-weight: bold;
  line-height: inherit;
  white-space: nowrap;
}

.site-nav__brand:hover,
.site-nav__brand:focus-visible {
  color: var(--accent);
}

.site-nav__toggle {
  display: none;
  margin: 0;
  padding: 0.25rem 0.75rem;
  background: transparent;
  border: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.site-nav__burger {
  position: relative;
  display: block;
  width: 30px;
  height: 20px;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
}

.site-nav__burger span {
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 3px;
  background: var(--nav-text);
  border-radius: 9px;
  opacity: 1;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.site-nav__burger span:nth-child(1) { top: 0; }
.site-nav__burger span:nth-child(2) { top: 10px; }
.site-nav__burger span:nth-child(3) { top: 20px; }

.site-nav--open .site-nav__burger span:nth-child(1) {
  top: 11px;
  transform: rotate(135deg);
}

.site-nav--open .site-nav__burger span:nth-child(2) {
  left: -60px;
  opacity: 0;
}

.site-nav--open .site-nav__burger span:nth-child(3) {
  top: 11px;
  transform: rotate(-135deg);
}

.site-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 0 0 auto;
  padding: 0;
  list-style: none;
  text-align: center;
}

.site-menu__entry {
  position: relative;
}

.site-menu__item,
.scheme-toggle {
  position: relative;
  display: block;
  padding: 0.5rem;
  color: var(--nav-text);
  letter-spacing: 0.055em;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.site-menu__item:hover,
.site-menu__item:focus-visible {
  color: var(--accent);
}

.site-menu__label {
  position: relative;
}

.site-menu__label::after {
  position: absolute;
  right: 0;
  bottom: -0.28rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transition: opacity 160ms ease, transform 160ms ease;
}

.site-menu__item:hover .site-menu__label::after,
.site-menu__item:focus-visible .site-menu__label::after {
  opacity: 0.9;
  transform: scaleX(1);
}

.site-menu__icon {
  display: none;
}

.scheme-toggle {
  margin: 0;
  background: transparent;
  border: 0;
  font: inherit;
  line-height: inherit;
  letter-spacing: 0;
}

.scheme-toggle:hover,
.scheme-toggle:focus-visible {
  color: var(--nav-text);
}

.scheme-toggle__icon {
  display: inline-block;
  width: 0.875rem;
  height: 0.875rem;
  margin: 0 0.2rem;
  vertical-align: -0.125em;
}

.scheme-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 1199.98px) {
  .site-nav__inner { max-width: 960px; }
}

@media (max-width: 767.98px) {
  .site-nav--open {
    position: fixed;
  }

  .site-nav__brand,
  .site-nav__toggle {
    position: relative;
    z-index: 1030;
  }

  .site-nav__inner {
    max-width: 720px;
    padding: 0;
  }

  .site-nav__toggle {
    display: block;
  }

  .site-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1029;
    display: block;
    margin: 0;
    padding: 4.4rem 0 2rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background-color: var(--masthead);
    text-align: left;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    will-change: opacity, transform;
  }

  .home-page .site-menu {
    background-color: var(--home-nav);
  }

  .site-nav--open .site-menu {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateY(0);
  }

  .site-menu__entry {
    width: min(100% - 2rem, 30rem);
    margin: 0 auto;
  }

  .site-nav--open .site-menu__entry {
    animation: site-menu-entry-in 0.18s ease both;
  }

  .site-menu__item,
  .scheme-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    padding: 0.95rem 0.15rem;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    color: var(--nav-text);
    letter-spacing: 0;
    text-align: left;
  }

  .site-menu__item:hover,
  .site-menu__item:active,
  .site-menu__item:focus-visible,
  .scheme-toggle:hover,
  .scheme-toggle:active {
    color: var(--nav-text);
    background: rgba(255, 255, 255, 0.055);
  }

  .site-menu__label,
  .scheme-toggle__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    font-size: 0.92rem;
    letter-spacing: 0.055em;
    line-height: 1.2;
    text-align: left;
    white-space: normal;
  }

  .site-menu__label::after {
    display: none;
  }

  .site-menu__icon,
  .scheme-toggle__icon {
    display: inline-block;
    order: 2;
    width: 1rem;
    height: 1rem;
    margin: 0 0 0 auto;
    vertical-align: middle;
  }
}

@media (max-width: 767px) {
  .site-nav {
    font-size: 1rem;
    line-height: 2.5rem;
  }

  .site-nav__inner {
    max-width: 540px;
  }
}

@media (max-width: 575.98px) {
  .site-nav__inner {
    max-width: none;
  }
}

@keyframes site-menu-entry-in {
  from {
    opacity: 0;
    transform: scale(0.82) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-menu,
  .site-nav__burger,
  .site-nav__burger span,
  .site-menu__label::after {
    transition: none;
  }

  .site-nav--open .site-menu__entry {
    animation: none;
  }
}

/* 20-masthead.css */
/* Editorial masthead: a solid band with the page title resting on its baseline. */
.masthead {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--masthead-height);
  padding: 0 0 2.65rem;
  overflow: hidden;
  background: var(--masthead);
  cursor: default;
}

.masthead__inner {
  width: min(100% - 2rem, var(--column-width));
  margin: 0;
  color: var(--masthead-text);
  text-align: left;
  overflow-wrap: break-word;
}

.masthead__title {
  margin: 0;
  color: inherit;
  font-family: var(--font-ui);
  font-size: clamp(1.72rem, 2.15vw, 2.05rem);
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.25;
}

.masthead__inner::after {
  display: block;
  width: 2.75rem;
  height: 1px;
  margin-top: 0.95rem;
  background: var(--masthead-line);
  content: "";
}

@media (max-width: 767px) {
  .masthead {
    height: var(--masthead-height-mobile);
    padding-bottom: 1.9rem;
  }

  .masthead__title {
    font-size: 1.5rem;
  }

  .masthead__inner::after {
    width: 2.25rem;
    margin-top: 0.75rem;
  }
}

/* 30-home.css */
/* Home: a fixed full-viewport cover with a typed slogan, then square desktop cards or a lightweight mobile reading list. */
html.home-root,
body.home-page {
  background: var(--home-bg);
  overscroll-behavior-y: none;
}

.home-page {
  min-height: 100%;
  --home-navbar-height: 3.5rem;
  --home-edge-gap: clamp(0.75rem, 2vh, 1rem);
  --home-card-gap: clamp(0.625rem, 1.5vh, 0.875rem);
  --home-card-size: clamp(
    9.5rem,
    calc(
      (
          100vh - var(--home-navbar-height) - var(--home-edge-gap) -
            var(--home-edge-gap) - var(--home-card-gap) - var(--home-card-gap)
        ) /
        3
    ),
    13.5rem
  );
  --home-card-size: clamp(
    9.5rem,
    calc(
      (
          100svh - var(--home-navbar-height) - var(--home-edge-gap) -
            var(--home-edge-gap) - var(--home-card-gap) - var(--home-card-gap)
        ) /
        3
    ),
    13.5rem
  );
}

.home-page .site-header {
  position: relative;
  z-index: auto;
  height: 100vh;
  height: 100svh;
}

.home-page .site-nav {
  z-index: 1030;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.home-cover {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--home-bg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  cursor: default;
}

.home-cover__mask {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    180deg,
    rgba(3, 15, 25, 0.3) 0%,
    rgba(3, 15, 25, 0.1) 45%,
    rgba(3, 15, 25, 0.28) 100%
  );
}

.home-cover__slogan {
  width: 80%;
  max-width: calc(960px - 6rem);
  color: var(--home-slogan, #fff);
  text-align: center;
  text-shadow: 0 2px 22px rgba(2, 13, 22, 0.75);
  overflow-wrap: break-word;
  transition: opacity 260ms ease, transform 260ms ease;
}

.home-cover__text {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
}

.typed-cursor {
  margin: 0 0.2rem;
}

@media (max-width: 767px) {
  #subtitle,
  .home-slogan-static,
  .typed-cursor {
    font-size: 1.5rem;
  }
}

@media (max-width: 575px) {
  .home-cover__slogan {
    font-size: 0.9rem;
  }

  #subtitle,
  .home-slogan-static,
  .typed-cursor {
    font-size: 1.35rem;
  }
}

.home-page--scrolled .home-cover__slogan {
  opacity: 0;
  transform: translateY(-1.25rem);
}

.home-main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--home-navbar-height) + var(--home-edge-gap)) 0 var(--home-edge-gap);
  background: transparent;
}

.home-main__inner {
  width: min(100% - 2rem, 1180px);
  margin: 0 auto;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(4, var(--home-card-size));
  grid-template-rows: repeat(3, var(--home-card-size));
  grid-auto-flow: column;
  gap: var(--home-card-gap);
  align-items: start;
  justify-content: start;
  direction: ltr;
  width: 100%;
}

/* Fill six positions on the left, then six on the right, around a clear centre. */
@media (min-width: 992px) {
  .home-page:has(.home-grid--split) {
    /* Navigation has scrolled away; give the card stage equal top/bottom space. */
    --home-navbar-height: 0rem;
    --home-edge-gap: clamp(1.5rem, 4vh, 3rem);
    --home-card-gap: clamp(1.25rem, 2vw, 1.5rem);
  }

  .home-main__inner:has(.home-grid--split) {
    width: min(100% - 2rem, 1180px, calc(4 * var(--home-card-size) + 4 * var(--home-card-gap) + clamp(8rem, 16vw, 16rem)));
  }

  .home-grid--split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    column-gap: calc(clamp(8rem, 16vw, 16rem) + 2 * var(--home-card-gap));
  }

  .home-wing {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: var(--home-card-gap);
    width: 100%;
  }

}

@media (max-width: 991px) {
  .home-wing {
    display: contents;
  }
}

.index-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: clamp(1rem, 2.3vh, 1.25rem);
  overflow: hidden;
  direction: ltr;
  background: var(--home-card);
  border: 0;
  border-radius: 0;
  box-shadow: 0 10px 26px rgba(2, 9, 14, 0.14);
  cursor: pointer;
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.index-card:hover,
.index-card:focus-within {
  z-index: 1;
  background-color: var(--home-card-hover);
  box-shadow: 0 14px 32px rgba(2, 9, 14, 0.2);
}

.index-card:focus-within {
  outline: 1px solid rgba(231, 229, 219, 0.5);
  outline-offset: 3px;
}

.index-header {
  margin: 0 0 0.65rem;
  color: var(--home-card-title);
  font-size: clamp(1.15rem, 2.5vh, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.index-header a {
  color: inherit;
}

.index-header a::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  content: "";
}

.index-header a:hover,
.index-header a:focus {
  color: var(--home-card-title-hover);
}

.index-excerpt {
  display: block;
  height: auto;
  margin: 0 0 0.9rem;
  color: var(--home-card-excerpt);
  font-size: clamp(0.78rem, 1.7vh, 0.88rem);
  pointer-events: none;
}

.index-excerpt > div {
  display: -webkit-box;
  width: 100%;
  overflow: hidden;
  line-height: 1.55;
  word-break: break-word;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.index-meta {
  display: flex;
  flex-wrap: wrap;
  margin-top: auto;
  margin-bottom: 0;
  color: var(--home-card-meta);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.index-meta a {
  color: var(--home-card-meta-link);
}

.index-meta__item {
  display: inline-flex;
  align-items: center;
}

.index-meta__item > * {
  margin-right: 0.2rem;
}

.index-meta__icon {
  opacity: 0.75;
}

.home-page .site-footer {
  display: none;
}

@media (max-width: 991px) {
  .home-grid {
    grid-template-columns: repeat(3, var(--home-card-size));
    grid-template-rows: repeat(4, var(--home-card-size));
  }
}

@media (max-width: 767px) {
  .home-main {
    justify-content: flex-start;
    min-height: 100svh;
    padding: 48px 0 64px;
    background: rgba(6,21,33,.94);
  }
  .home-main__inner { width: min(calc(100% - 48px), 38rem); }
  .home-grid { display: flex; flex-direction: column; gap: 0; }
  .home-wing { display: contents; }
  .index-card {
    aspect-ratio: auto;
    padding: 25px 0 27px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    border-bottom: 1px solid rgba(220,221,216,.16);
  }
  .index-card:hover, .index-card:focus-within { background: transparent; box-shadow: none; }
  .index-header {
    display: block;
    overflow: visible;
    margin: 0 0 10px;
    font-size: 21px;
    font-weight: 500;
    line-height: 1.5;
    -webkit-line-clamp: unset;
  }
  .index-excerpt { margin: 0; font-size: 15px; line-height: 1.75; }
  .index-excerpt > div { line-height: 1.75; -webkit-line-clamp: 2; }
  .index-meta { order: -1; margin: 0 0 9px; font-size: 12px; line-height: 1.5; letter-spacing: .07em; }
  .index-meta__icon { display: none; }
  .index-meta__item > * { margin: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .home-cover__slogan,
  .index-card {
    transition: none;
  }
}

.home-slogan-static { display: none; }
@media (max-width: 767px) {
  .home-cover__text--mobile-static #subtitle,
  .home-cover__text--mobile-static .typed-cursor,
  .home-cover__text--mobile-static .home-slogan-nojs { display: none; }
  .home-cover__text--mobile-static .home-slogan-static { display: inline; }
}

/* 32-home-folio.css */
/* The fog composition is opt-in and never changes the phone homepage. */
.home-folio, .home-fog-image, .home-fog-veil { display:none; }
@media (min-width:768px) {
  html[data-home-style="fog"] {
    --folio-font:Charter,Georgia,"Times New Roman","Songti SC","Blue Note Serif",STSong,serif;
    --fog-camera:1; --fog-light:.88; --folio-reveal:1; --folio-rise:0px;
    --folio-top:clamp(20px,4svh,48px); --folio-bottom:clamp(16px,3svh,36px);
    --folio-row-gap:clamp(10px,2svh,28px); --folio-footer-gap:clamp(20px,3svh,32px);
    --folio-middle:clamp(150px,26vw,440px);
  }
  html[data-home-style="fog"] .home-cover { background-color:#0b1d27; }
  html[data-home-style="fog"] .home-fog-image {
    display:block; position:absolute; inset:0; background:inherit;
    transform:scale(var(--fog-camera));
  }
  html[data-home-style="fog"] .home-fog-veil {
    display:block; position:absolute; inset:0;
    background:linear-gradient(90deg,rgba(8,24,34,.91),rgba(8,24,34,.25) 45%,rgba(8,24,34,.25) 55%,rgba(8,24,34,.91));
    opacity:var(--fog-light);
  }
  html[data-home-style="fog"] .home-cover__slogan { transition:none; }
  html[data-home-style="fog"] .home-main { display:block; min-height:100svh; padding:var(--folio-top) 0 var(--folio-bottom); }
  html[data-home-style="fog"] .home-main__inner { display:none; }
  html[data-home-style="fog"] .home-folio {
    display:flex; flex-direction:column; width:min(calc(100% - clamp(64px,7.5vw,112px)),1440px);
    margin:auto; color:#eeece5; font-family:var(--folio-font); opacity:var(--folio-reveal); transform:translateY(var(--folio-rise));
  }
  .home-folio-pages { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--folio-middle); row-gap:40px; }
  .home-folio-column { display:grid; grid-template-rows:repeat(5,minmax(0,1fr)); row-gap:var(--folio-row-gap); min-width:0; scroll-margin-top:24px; }
  .home-folio-entry { display:flex; position:relative; flex-direction:column; align-items:center; justify-content:center; min-width:0; width:100%; max-width:320px; margin:0 auto; padding:0; text-align:center; }
  .home-folio-date { font-size:.75rem; line-height:1.5; color:#aebfc3; font-variant-numeric:tabular-nums; letter-spacing:.035em; margin-bottom:7px; }
  .home-folio-title { margin:0; font:400 clamp(1.3125rem,1.7vw,1.5625rem)/1.4 var(--folio-font); color:#eeece5; overflow-wrap:anywhere; max-width:100%; }
  .home-folio-title a { color:inherit; text-decoration:none; }
  .home-folio-title a::after { content:""; position:absolute; inset:0; }
  .home-folio-title span { position:relative; display:inline-block; max-width:100%; transition:color 200ms ease; }
  .home-folio-title span::after { content:""; position:absolute; bottom:-.24rem; left:0; right:0; height:1px; background:currentColor; opacity:0; transform:scaleX(.35); transition:opacity 160ms ease,transform 160ms ease; }
  .home-folio-entry:hover .home-folio-title span,.home-folio-entry:focus-within .home-folio-title span { color:var(--accent); }
  .home-folio-entry:hover .home-folio-title span::after,.home-folio-entry:focus-within .home-folio-title span::after { opacity:.9; transform:scaleX(1); }
  .home-folio-title a:focus-visible { outline:none; }
  .home-folio-title a:focus-visible::after { outline:1px solid var(--accent); outline-offset:6px; }
  .home-folio-excerpt { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; margin:12px 0 0; font-size:1rem; line-height:1.75; color:#c6cecd; }
  .home-folio-pagination { display:flex; align-items:center; justify-content:center; gap:12px; margin:var(--folio-footer-gap) auto 0; max-width:100%; flex-shrink:0; }
  .home-folio-numbers { display:flex; justify-content:center; flex-wrap:wrap; gap:4px; }
  .home-folio-pagination a,.home-folio-pagination button {
    position:relative; display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px;
    padding:0 10px; border:0; border-radius:0; background:transparent; color:#aebfc3; font:400 .875rem/1 var(--folio-font); cursor:pointer; text-decoration:none;
  }
  .home-folio-pagination button { flex-shrink:0; }
  .home-folio-pagination svg { width:16px; height:16px; }
  .home-folio-pagination a::after { content:""; position:absolute; height:1px; bottom:7px; left:13px; right:13px; background:currentColor; opacity:0; transform:scaleX(.35); transition:opacity 160ms ease,transform 160ms ease; }
  .home-folio-pagination a[aria-current] { color:#eeece5; }
  .home-folio-pagination a[aria-current]::after,.home-folio-pagination a:hover::after { opacity:.9; transform:scaleX(1); }
  .home-folio-pagination a:hover,.home-folio-pagination button:not(:disabled):hover { color:var(--accent); }
  .home-folio-pagination :focus-visible { outline:1px solid var(--accent); outline-offset:2px; }
  .home-folio-pagination button:disabled { opacity:.25; cursor:default; }
  .home-folio-pagination button { visibility:hidden; }
  .home-folio.is-ready .home-folio-pagination button { visibility:visible; }
  .home-folio.is-ready .home-folio-pages {
    position:relative; display:block;
    height:calc(100svh - var(--folio-top) - var(--folio-bottom) - 44px - var(--folio-footer-gap));
    min-height:38rem;
  }
  .home-folio.is-ready .home-folio-column { position:absolute; top:0; bottom:0; width:calc((100% - var(--folio-middle))/2); }
  .home-folio.is-ready .home-folio-column[data-side="left"] { left:0; }
  .home-folio.is-ready .home-folio-column[data-side="right"] { right:0; }
  .home-folio.is-ready .home-folio-column[hidden] { display:none; }
  .home-folio.is-ready .home-folio-title span { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding-bottom:5px; margin-bottom:-5px; }
  .home-folio.is-ready .home-folio-title span::after { bottom:0; }
  html[data-home-style="fog"]:not(.home-fog-ready) .home-page--scrolled .home-cover__slogan { visibility:hidden; }
}
@media (min-width:768px) and (max-height:799px) {
  html[data-home-style="fog"] { --folio-row-gap:clamp(8px,1.6svh,12px); --folio-footer-gap:20px; }
  .home-folio.is-ready .home-folio-pages { min-height:30rem; }
  .home-folio-excerpt { -webkit-line-clamp:1; font-size:.9375rem; line-height:1.65; margin-top:8px; }
  .home-folio-date { margin-bottom:5px; }
  .home-folio-title { font-size:clamp(1.25rem,1.7vw,1.5rem); line-height:1.35; }
}
@media (min-width:768px) and (max-height:650px) {
  .home-folio-excerpt { display:none; }
  .home-folio-date { font-size:.75rem; }
  .home-folio.is-ready .home-folio-pages { min-height:22rem; }
}
@media (min-width:768px) and (max-height:460px) {
  .home-folio.is-ready .home-folio-title span { -webkit-line-clamp:1; }
}
@media (min-width:768px) and (prefers-reduced-motion:reduce) {
  .home-folio-title span,.home-folio-title span::after,.home-folio-pagination a::after { transition:none; }
}

/* 36-letterbox.css */
/* Letterbox design (opt-in: `design: letterbox`).
   One bar of fixed height carries the navigation at the top of every page and scrolls
   away with the document like any other content; it does not return on scroll-up. The
   home page frames the cover between that bar and a lower bar of the same height, which
   also scrolls with the page: the cover first, then a dated index. The lower bar shows
   the slogan, or the excerpt of the entry under the pointer, on up to two lines in a bar that never
   changes height when its text changes. Content pages open with a centred title card on the same blue-black. */

html[data-design="letterbox"] {
  --lb-bar: var(--home-bg);
  --theme-color: var(--lb-bar);
  /* Home Screen apps can sample body rather than html for the system status bar.
     Both stay dark; header/main/footer paint the reading surface independently. */
  background-color: var(--lb-bar);
  --lb-safe-top: env(safe-area-inset-top, 0px);
  --lb-safe-bottom: env(safe-area-inset-bottom, 0px);
  --lb-safe-left: env(safe-area-inset-left, 0px);
  --lb-safe-right: env(safe-area-inset-right, 0px);
  --lb-bar-h: 88px;
  --lb-dock-font-size: 1.1875rem;
  --lb-dock-line-height: calc(var(--lb-dock-font-size) * 1.45);
  /* Centre against the whole bar, reserving equal safe space above and below
     even a two-line subtitle. Share its height with the cover calculation. */
  --lb-dock-h: max(calc(var(--lb-bar-h) + var(--lb-safe-bottom)), calc(2 * var(--lb-dock-line-height) + 2 * var(--lb-safe-bottom)));
  --lb-gutter: clamp(24px, 5vw, 72px);
  /* On very wide screens the bar's contents and the index share one centred measure. */
  --lb-measure: 1680px;
  --lb-on: #eeebe3;
  --lb-on-2: #bcc6cb;
  --lb-on-3: #8b9aa3;
  --lb-line: rgba(226, 232, 236, 0.09);
  /* The home index below the lower bar. By default it stays on the bar's blue-black;
     a site can set the colour tokens index-bg, index-title, index-meta and index-hover
     (per scheme) to set it on the article paper instead. */
  --lb-index-bg: var(--index-bg, var(--lb-bar));
  --lb-index-title: var(--index-title, var(--lb-on));
  --lb-index-meta: var(--index-meta, var(--lb-on-3));
  --lb-index-hover: var(--index-hover, var(--accent));
  /* Short and long pages keep the same width, so the bar never shifts sideways. */
  /* Keep a real scrollbar slot even on short pages. WebKit can re-evaluate width
     breakpoints after first paint with scrollbar-gutter: stable, moving fixed bars. */
  overflow-y: scroll;
  overscroll-behavior: none;
  scroll-padding-top: 1rem;
}

/* ── The bar (every page) ─────────────────────────────────────────── */
html[data-design="letterbox"] body {
  display: flex;
  flex-direction: column;
  height: auto;
  min-height: 100%;
  min-height: 100svh;
  padding-top: calc(var(--lb-bar-h) + var(--lb-safe-top));
  background: var(--lb-bar);
  overscroll-behavior: none;
}

/* Paint only the system safe area while scrolling, never a second navigation bar. */
html[data-design="letterbox"] body::before {
  content: "";
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  height: var(--lb-safe-top);
  background: var(--lb-bar);
  z-index: 2000;
  pointer-events: none;
}

html[data-design="letterbox"] .site-header,
html[data-design="letterbox"] .page-body,
html[data-design="letterbox"] .site-footer {
  flex-shrink: 0;
  background: var(--paper);
}

html[data-design="letterbox"] .page-body {
  flex-grow: 1;
  padding-left: var(--lb-safe-left);
  padding-right: var(--lb-safe-right);
}

/* The bar is positioned against the document, not the header, so it sits in the space
   reserved by the body's top padding and leaves with the page when it scrolls. */
html[data-design="letterbox"] .site-header {
  position: static;
}

/* The fragment starts below the body's bar padding. Include that reserved space
   so native back-to-top navigation reveals the entire bar, including safe areas. */
html[data-design="letterbox"] #page-top {
  scroll-margin-top: calc(var(--lb-bar-h) + var(--lb-safe-top));
}

/* Paint across both sides of the fractional edge. An outer shadow alone can still
   leave a partially covered pixel in dark mode. This strip changes no geometry. */
html[data-design="letterbox"] .site-header:has(.masthead) + .page-body::before {
  content: "";
  position: absolute;
  top: -1px;
  right: 0;
  left: 0;
  height: 2px;
  background: var(--paper);
  pointer-events: none;
}

html[data-design="letterbox"] .site-nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: calc(var(--lb-bar-h) + var(--lb-safe-top));
  padding: var(--lb-safe-top) 0 0;
  background: var(--lb-bar);
  box-shadow: none;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
}

html[data-design="letterbox"] .site-nav__inner {
  flex-wrap: nowrap;
  height: 100%;
  max-width: calc(var(--lb-measure) + 2 * var(--lb-gutter));
  margin: 0 auto;
  padding: 0 max(var(--lb-gutter), var(--lb-safe-right)) 0 max(var(--lb-gutter), var(--lb-safe-left));
}

html[data-design="letterbox"] .site-nav__brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  color: var(--lb-on);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: 0.07em;
}

html[data-design="letterbox"] .site-nav__brand:is(:hover, :focus-visible) {
  color: var(--accent);
}

html[data-design="letterbox"] .site-menu {
  margin-right: -11px;
}

html[data-design="letterbox"] .site-menu__item,
html[data-design="letterbox"] .scheme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 11px;
  color: var(--lb-on-2);
  letter-spacing: 0.02em;
  transition: color 160ms ease;
}

html[data-design="letterbox"] .site-menu__item:hover,
html[data-design="letterbox"] .site-menu__item:focus-visible,
html[data-design="letterbox"] .scheme-toggle:hover,
html[data-design="letterbox"] .scheme-toggle:focus-visible {
  color: var(--accent);
}

html[data-design="letterbox"] .site-menu__label::after {
  bottom: -0.2rem;
}

html[data-design="letterbox"] .scheme-toggle__icon {
  width: 1.0625rem;
  height: 1.0625rem;
  margin: 0;
  vertical-align: middle;
}

html[data-design="letterbox"] .site-nav :focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

/* A quiet two-line burger, drawn in the bar's own weight. */
html[data-design="letterbox"] .site-nav__toggle {
  margin-right: -10px;
  padding: 15px 10px;
}

html[data-design="letterbox"] .site-nav__burger {
  width: 22px;
  height: 13px;
}

html[data-design="letterbox"] .site-nav__burger span {
  height: 1.5px;
  background: var(--lb-on);
  border-radius: 0;
}

html[data-design="letterbox"] .site-nav__burger span:nth-child(1) { top: 0; }
html[data-design="letterbox"] .site-nav__burger span:nth-child(2) { top: 6px; }
html[data-design="letterbox"] .site-nav__burger span:nth-child(3) { top: 12px; }
html[data-design="letterbox"] .site-nav--open .site-nav__burger span:nth-child(1) { top: 6px; }
html[data-design="letterbox"] .site-nav--open .site-nav__burger span:nth-child(3) { top: 6px; }

html[data-design="letterbox"] .site-menu,
html[data-design="letterbox"] .home-page .site-menu {
  background-color: var(--lb-bar);
}

@media (max-width: 767.98px) {
  /* An open menu keeps its close button in view. */
  html[data-design="letterbox"] .site-nav--open {
    position: fixed;
  }

  html[data-design="letterbox"] .site-menu {
    padding-top: calc(var(--lb-bar-h) + var(--lb-safe-top) + 0.5rem);
    padding-bottom: max(2rem, var(--lb-safe-bottom));
    padding-left: var(--lb-safe-left);
    padding-right: var(--lb-safe-right);
  }

  html[data-design="letterbox"] .site-menu__item,
  html[data-design="letterbox"] .scheme-toggle {
    justify-content: flex-start;
    min-height: 56px;
    padding: 0 0.15rem;
    border-bottom-color: var(--lb-line);
    color: var(--lb-on);
  }

  html[data-design="letterbox"] .scheme-toggle__icon {
    margin-left: auto;
  }

  html[data-design="letterbox"] .site-menu__label,
  html[data-design="letterbox"] .scheme-toggle__label {
    font-size: 1.0625rem;
    letter-spacing: 0.04em;
  }
}

/* The same title block on articles, Archives, Gallery, About and other content pages.
   It sits on the page's own paper below the bar, with no band or rule of its own, and the
   text follows close beneath. A reserved date row keeps the title on one baseline even
   when no date is present. Bottom padding protects descenders from the following
   paper surface and its seam strip without moving the title itself. */
html[data-design="letterbox"] .masthead {
  display: block;
  height: auto;
  min-height: 0;
  padding: 5rem max(var(--lb-gutter), var(--lb-safe-right)) 1rem max(var(--lb-gutter), var(--lb-safe-left));
  overflow: visible;
  background: transparent;
}

html[data-design="letterbox"] .masthead__inner {
  display: grid;
  grid-template-rows: 1.5rem auto;
  gap: 0.75rem;
  width: 100%;
  max-width: var(--column-width);
  margin: 0 auto;
  color: var(--heading);
  text-align: center;
}

html[data-design="letterbox"] .masthead__date {
  grid-row: 1;
  display: block;
  margin: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-variant-numeric: lining-nums;
  letter-spacing: 0.1em;
  line-height: 1.5rem;
}

html[data-design="letterbox"] .masthead__title {
  grid-row: 2;
  font-size: clamp(2.125rem, 3vw, 2.75rem);
  letter-spacing: 0.03em;
  line-height: 1.25;
  text-wrap: balance;
}

html[data-design="letterbox"] .masthead__inner::after {
  content: none;
}

html[data-design="letterbox"] .page-body {
  padding-top: 2.5rem;
}

/* The error cover fills the space below the bar, without the prose-page gutter.
   Keep safe-area padding inside the image so landscape phones have no paper strips. */
html[data-design="letterbox"] .error-page .page-body {
  padding: 0;
}

html[data-design="letterbox"] .error-cover {
  min-height: calc(100vh - var(--lb-bar-h) - var(--lb-safe-top));
  min-height: calc(100svh - var(--lb-bar-h) - var(--lb-safe-top));
}

html[data-design="letterbox"] .error-cover__mask {
  min-width: 0;
  padding-right: max(1rem, var(--lb-safe-right));
  padding-bottom: max(6rem, var(--lb-safe-bottom));
  padding-left: max(1rem, var(--lb-safe-left));
}

html[data-design="letterbox"] .post-toc {
  top: 1rem;
}

html[data-design="letterbox"] .post-toc__body {
  max-height: calc(100svh - 8rem);
}

/* English verse and quoted lines share the prose face; formulas keep --font-math. */
html[data-design="letterbox"] .markdown-body .literary-block__section p,
html[data-design="letterbox"] .markdown-body .literary-block__title,
html[data-design="letterbox"] .markdown-body .literary-block--verse p {
  font-family: var(--font-prose);
}

html[data-design="letterbox"] .markdown-body .literary-block__section .literary-block__emphasis {
  font-weight: 500;
}

/* Archive and tag listings read like a book's table of contents: one narrow centred column,
   the year as a small centred heading, each line a title with its date set flush right.
   No rules and no fills. An archive annotation takes the date's place on the right. */
html[data-design="letterbox"] .listing {
  width: 100%;
  max-width: 33rem;
  margin: 0 auto;
}

html[data-design="letterbox"] .listing__year {
  margin: 2.75rem 0 0.875rem;
  color: var(--muted);
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-align: center;
  text-indent: 0.32em;
}

html[data-design="letterbox"] .listing__year:first-child {
  margin-top: 0;
}

html[data-design="letterbox"] .listing__item {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.4375rem 0;
  background: transparent;
  border: 0;
}

html[data-design="letterbox"] .listing__item:hover,
html[data-design="letterbox"] .listing__item:focus {
  background: transparent;
}

html[data-design="letterbox"] .listing__annotated {
  display: contents;
}

html[data-design="letterbox"] .listing__title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text);
  font-size: 1.125rem;
  line-height: 1.5;
  transition: color 160ms ease;
}

html[data-design="letterbox"] .listing__item:hover .listing__title,
html[data-design="letterbox"] .listing__item:focus-visible .listing__title {
  color: var(--link);
}

html[data-design="letterbox"] .listing__note {
  order: 2;
  flex: none;
  margin: 0 0 0 auto;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.65;
}

/* A closing full-width bracket carries its own white space; let it hang so the note's
   right edge lines up with the dates above. */
html[data-design="letterbox"] .listing__note--close {
  margin-right: -0.5em;
}

html[data-design="letterbox"] .listing__date {
  order: 3;
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.9375rem;
  font-style: italic;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.04em;
}

html[data-design="letterbox"] .listing__date:empty {
  display: none;
}

/* Optional details (archive.details): the post's length beside its date and its first
   sentence under the title. Same face, smaller and muted. */
html[data-design="letterbox"] .listing--details .listing__item {
  flex-wrap: wrap;
  row-gap: 0;
  padding: 0.75rem 0;
}

html[data-design="letterbox"] .listing__length {
  order: 2;
  flex: none;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8125rem;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.02em;
}

html[data-design="letterbox"] .listing__item:has(.listing__length) .listing__date {
  margin-left: 0;
}

html[data-design="letterbox"] .listing__excerpt {
  order: 4;
  flex-basis: 100%;
  margin-top: 0.125rem;
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

@media (max-width: 479.98px) {
  html[data-design="letterbox"] .listing__item {
    flex-wrap: wrap;
    row-gap: 0;
  }

  html[data-design="letterbox"] .listing__note {
    order: 4;
    flex-basis: 100%;
    margin: 0;
  }
}

/* The search panel is cut from the same paper as the page, by day and by night. */
html[data-design="letterbox"] .site-search-overlay {
  padding-left: max(1rem, var(--lb-safe-left));
  padding-right: max(1rem, var(--lb-safe-right));
}

html[data-design="letterbox"] .site-search-dialog {
  color: var(--text);
  background: var(--paper);
  border-color: var(--line);
}

html[data-design="letterbox"] .site-search-dialog__field input,
html[data-design="letterbox"] .site-search-result {
  color: var(--text);
}

html[data-design="letterbox"] .site-search-dialog__icon,
html[data-design="letterbox"] .site-search-dialog__close,
html[data-design="letterbox"] .site-search-dialog__field input::placeholder,
html[data-design="letterbox"] .site-search-result__excerpt,
html[data-design="letterbox"] .site-search-result__privacy {
  color: var(--muted);
}

html[data-design="letterbox"] .site-search-result {
  border-color: var(--line);
}

html[data-design="letterbox"] .site-search-result:hover,
html[data-design="letterbox"] .site-search-result:focus-visible {
  color: var(--link-hover);
  background: var(--link-hover-bg);
}

/* ── Home: the frame between the two bars ─────────────────────────── */
html[data-design="letterbox"] .home-page .site-header {
  height: 0;
}

html[data-design="letterbox"] .home-page .home-main {
  display: block;
  min-height: 0;
  padding: 0;
  background: transparent;
}

.letterbox-frame {
  --lb-cover-position: 50% 52%;
  height: calc(100vh - var(--lb-bar-h) - var(--lb-safe-top) - var(--lb-dock-h));
  height: calc(100svh - var(--lb-bar-h) - var(--lb-safe-top) - var(--lb-dock-h));
  margin: 0;
  overflow: hidden;
  /* An optional placeholder (home.cover_placeholder) is painted here while the cover
     loads, framed like the cover itself. */
  background-color: #0b1d27;
  background-position: var(--lb-cover-position);
  background-size: cover;
}

.letterbox-frame picture {
  display: contents;
}

.letterbox-frame__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--lb-cover-position);
}

.letterbox-dock {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--lb-dock-h);
  padding: var(--lb-safe-bottom) max(var(--lb-gutter), var(--lb-safe-right)) var(--lb-safe-bottom) max(var(--lb-gutter), var(--lb-safe-left));
  background: var(--lb-bar);
}

.letterbox-dock__line {
  width: 100%;
  max-width: 48em;
  margin: 0;
  color: #e6e2d8;
  font-family: var(--font-ui);
  font-size: var(--lb-dock-font-size);
  line-height: var(--lb-dock-line-height);
  letter-spacing: 0.015em;
  text-align: center;
}

/* A whole first sentence, never cut mid-sentence. It almost always fits one line; a longer
   one wraps into two balanced lines inside the bar, whose size never changes. Only a
   sentence longer than two lines is clamped. */
.letterbox-dock__line span {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-wrap: balance;
}

.letterbox-dock__line span {
  transition: opacity 120ms ease;
}

.letterbox-dock.is-idle .letterbox-dock__line {
  font-style: italic;
  letter-spacing: 0.01em;
}

.letterbox-dock.is-swapping span {
  opacity: 0;
}

/* Home credits: years and titles share the page's centre axis. Equal side tracks
   let dates sit to the left without displacing short or undated titles. */
.letterbox-index {
  min-height: calc(100svh - var(--lb-bar-h));
  padding: 4rem max(var(--lb-gutter), var(--lb-safe-right)) 4rem max(var(--lb-gutter), var(--lb-safe-left));
  background: var(--lb-index-bg);
  color: var(--lb-index-title);
  font-family: var(--font-ui);
}

.letterbox-credits {
  width: 100%;
  max-width: 27.5rem;
  margin-inline: auto;
}

.letterbox-year {
  width: 100%;
}

.letterbox-year + .letterbox-year {
  margin-top: 3.5rem;
}

.letterbox-year__title {
  margin: 0 0 0.75rem;
  color: var(--lb-index-meta);
  font-size: 0.9375rem;
  font-variant-numeric: lining-nums;
  font-weight: 400;
  letter-spacing: 0.32em;
  line-height: 1.5;
  text-align: center;
  text-indent: 0.32em;
}

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

.letterbox-entry__link {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) 4rem;
  column-gap: 1rem;
  align-items: baseline;
  min-height: 44px;
  padding: 0.4375rem 0;
  color: inherit;
}

.letterbox-entry__date {
  grid-column: 1;
  color: var(--lb-index-meta);
  font-size: 1rem;
  font-style: italic;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.5;
  text-align: right;
}

.letterbox-entry__title {
  position: relative;
  grid-column: 2;
  justify-self: center;
  min-width: 0;
  max-width: 100%;
  color: var(--lb-index-title);
  font-size: 1.3125rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: center;
  overflow-wrap: anywhere;
}

.letterbox-entry__excerpt {
  display: none;
}

.letterbox-entry__link:hover .letterbox-entry__title,
.letterbox-entry__link:focus-visible .letterbox-entry__title {
  color: var(--lb-index-hover);
}

.letterbox-entry__link:focus-visible {
  outline: 1px solid var(--lb-index-hover);
  outline-offset: 4px;
}

/* The same solid square that ends an article closes the index on the centre line,
   and likewise links to the top of the page. */
.letterbox-end {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 3rem auto 0;
  color: var(--lb-index-title);
}

.letterbox-end > span {
  display: block;
  width: 7px;
  height: 7px;
  background: currentColor;
}

.letterbox-end:hover,
.letterbox-end:focus-visible {
  color: var(--lb-index-hover);
}

.letterbox-end:focus-visible {
  outline: 1px solid var(--lb-index-hover);
  outline-offset: 4px;
}

html:not(.private-reading-unlocked) .letterbox-entry[data-private-entry],
html:not(.private-reading-unlocked) .letterbox-year[data-private-year] {
  display: none;
}

/* Compact bars and type on phones and short windows. */
@media (max-width: 767px), (max-height: 520px) {
  html[data-design="letterbox"] {
    --lb-bar-h: 64px;
    --lb-dock-font-size: 1.0625rem;
    --lb-gutter: 24px;
  }

  /* The first screen is the same on every size: the top bar, the cover and the lower bar,
     filling the smallest viewport exactly. Both bars keep the small-screen height. */
  .letterbox-frame {
    min-height: 160px;
  }

  .letterbox-index {
    min-height: 0;
    padding: 3rem max(24px, var(--lb-safe-right)) 4rem max(24px, var(--lb-safe-left));
  }

  .letterbox-entry__link {
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    column-gap: 0.5rem;
    padding-block: 0.5rem;
  }

  .letterbox-entry__title {
    font-size: 1.1875rem;
  }

  html[data-design="letterbox"] .masthead {
    padding-top: 3.5rem;
  }

  html[data-design="letterbox"] .masthead__title {
    font-size: 1.875rem;
  }

  html[data-design="letterbox"] .page-body {
    padding-top: 1.75rem;
  }
}

/* Phones: a far-left date column leaves short titles stranded in the middle of the line.
   Each date sits directly above its title instead, as on the article title card, so both
   stay on the same centre axis as the year. Undated entries show their title alone. */
@media (max-width: 767px) {
  .letterbox-entry__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding-block: 0.625rem;
  }

  .letterbox-entry__date {
    font-size: 0.8125rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-align: center;
  }

  .letterbox-entry__date:empty {
    display: none;
  }

  .letterbox-entry__title {
    line-height: 1.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .letterbox-dock__line span,
  .letterbox-entry__date,
  .letterbox-entry__title,
  html[data-design="letterbox"] .site-menu__item,
  html[data-design="letterbox"] .scheme-toggle {
    transition: none;
  }
}

/* 40-editorial.css */
/* Content pages share one editorial surface: a 760px column below the masthead. */
.page-body {
  position: relative;
  z-index: 3;
  margin: 0;
  padding: 3.25rem 0 4rem;
  background: transparent;
}

.content-column {
  display: flow-root;
  width: min(100% - 2rem, var(--column-width));
  max-width: var(--column-width);
  margin: 0 auto;
  padding: 0;
}

.editorial-page .markdown-body,
.listing,
.about-info {
  font-family: var(--font-prose);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.78;
}

.editorial-page .markdown-body p {
  margin-bottom: 1.15em;
}

.page-content strong,
.post-content strong {
  font-weight: bold;
}

.page-content img,
.post-content img {
  max-width: 100%;
  object-fit: cover;
}

/* Lists of posts: archives, tags, categories. */
.listing {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.listing__year {
  margin: 2.25rem 0 0.45rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.listing__year:first-child {
  margin-top: 0;
}

.listing__item {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  padding: 0.78rem 0.2rem;
  color: var(--text);
  text-align: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.listing__item:hover,
.listing__item:focus {
  color: var(--link-hover);
  background: var(--link-hover-bg);
}

.listing__date {
  flex: 0 0 4.5rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.listing__title {
  display: block;
  overflow: visible;
  font-size: 1rem;
  text-overflow: clip;
  white-space: normal;
}

.listing__annotated {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.75rem;
  min-width: 0;
}

.listing__note {
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.65;
}

.listing__count {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.listing__kind {
  flex: 0 0 4.5rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.listing__copy {
  display: block;
}

.listing__summary {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

/* Pagination below long lists. */
.pagination-nav {
  margin-top: 3rem;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.pagination .space {
  align-self: flex-end;
}

.pagination .page-number,
.pagination .current,
.pagination .extend {
  padding: 0.5rem 0.75rem;
  background-color: transparent;
  border: 0;
  border-radius: 0.125rem;
  outline: 0;
  font-size: 0.9rem;
  line-height: 1.25;
}

.pagination .page-number {
  margin: 0 0.05rem;
}

.pagination .page-number:hover,
.pagination .current {
  background-color: var(--link-hover-bg);
  transition: background-color 0.2s ease-in-out;
}

/* About. */
.about-header {
  text-align: center;
}

.about-avatar {
  position: relative;
  z-index: 1;
  width: 8rem;
  height: 8rem;
  margin: 0 auto 1.6rem;
}

/* An optional quiet link: no hover change, only the keyboard focus outline. */
a.about-avatar--link {
  display: block;
  border-radius: 50%;
}

a.about-avatar--link:focus-visible {
  outline: 1px solid var(--link);
  outline-offset: 4px;
}

.about-avatar img {
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: none;
  object-fit: cover;
}

.about-info > div {
  margin-bottom: 0.55rem;
}

.about-name {
  color: var(--text);
  font-size: 1.45rem;
  font-weight: 500;
}

.about-intro {
  color: var(--muted);
  font-size: 1rem;
}

.about-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  font-size: 0.9rem;
}

.about-links__item {
  color: var(--link);
  letter-spacing: 0.055em;
}

.about-content {
  margin-top: 2.5rem;
}

/* 404. */
.error-page .page-body {
  padding: 0;
}

.error-cover {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  background-color: var(--masthead);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.error-cover__mask {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 6rem 1rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
}

.error-cover__title {
  margin: 0;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
  text-shadow: 0 2px 22px rgba(2, 13, 22, 0.75);
}

.error-cover__link {
  padding-bottom: 0.15rem;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  letter-spacing: 0.055em;
}

.error-cover__link:hover,
.error-cover__link:focus-visible {
  color: var(--accent);
  border-bottom-color: currentColor;
}

.site-footer {
  padding: 3rem 0 1rem;
  text-align: center;
}

@media (max-width: 767px) {
  .page-body {
    padding-top: 2.5rem;
  }

  .listing__item {
    gap: 0.65rem;
    padding: 0.7rem 0.1rem;
  }

  .listing__date,
  .listing__kind {
    flex-basis: 3.75rem;
  }
}

@media (max-width: 575px) {
  .listing__item {
    font-size: 0.95rem;
  }
}

/* 50-post.css */
/* Article pages: a centred reading column with an optional table of contents. */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--reading-width)) minmax(0, 1fr);
  align-items: start;
}

.post-content {
  grid-column: 2;
  display: flow-root;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 0;
}

.post-toc {
  position: sticky;
  top: 2rem;
  grid-column: 3;
  max-width: 16rem;
  margin-left: 2rem;
  padding: 3rem 0;
}

.post-toc__header {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: bold;
  line-height: 1.2;
}

.post-toc__header .icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.2rem;
}

.post-toc__body {
  max-height: 75vh;
  overflow-y: auto;
  scrollbar-width: none;
}

.post-toc__body::-webkit-scrollbar {
  display: none;
}

.post-toc ol {
  position: relative;
  margin: 0;
  padding-left: 1rem;
  list-style: none;
}

.post-toc .toc-item {
  position: relative;
  padding: 0.1rem 0;
}

.post-toc .toc-item::before {
  position: absolute;
  left: 0.25rem;
  width: 0.15rem;
  height: 0.2rem;
  margin: 0.65rem 0;
  background: var(--link-hover);
  border-radius: 2px;
  content: "";
  visibility: hidden;
  transition: height 0.1s ease-in-out, margin 0.1s ease-in-out, visibility 0.1s ease-in-out;
}

.post-toc .toc-item.is-active::before {
  height: 1rem;
  margin: 0.25rem 0;
  visibility: visible;
}

.post-toc .toc-link {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text);
  font-size: 0.95rem;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post-toc ol ol .toc-link {
  font-size: 0.85rem;
}

.post-toc .toc-link.is-active {
  color: var(--link-hover);
  font-weight: bold;
}

/* Previous / next: use the reading column even when photographs widen the article.
   Preserve the existing 0.35rem arrow overhang on either side. */
.post-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin: 1rem max(-0.35rem, calc((100% - var(--reading-width)) / 2 - 0.35rem));
  font-size: 0.9rem;
}

.post-nav__cell {
  display: flex;
  min-width: 0;
  padding: 0;
}

.post-nav__cell--next {
  justify-content: flex-end;
}

.post-nav__prev,
.post-nav__next {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 44px;
  gap: 0.375rem;
  color: var(--text);
}

/* Native fragment navigation moves focus to the header without outlining it. */
.site-header#page-top:focus { outline: none; }

/* A full-width, quiet reading link after the authored text. */
.post-companion {
  width: 100%;
  max-width: var(--reading-width);
  margin: 2.5rem auto 1.5rem;
  font-size: 0.9rem;
}

.post-companion__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  font: inherit;
  color: var(--link-hover);
}

.post-companion__link > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.post-companion__link .icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.post-companion__link:hover {
  color: var(--heading);
  border-color: var(--link);
}

.post-companion__link:hover > span {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.post-nav .icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  stroke-width: 1.5;
}


.post-nav__title {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.post-nav__label {
  display: none;
}

.post-nav a:hover,
.post-nav a:focus-visible {
  color: var(--link-hover);
}

.post-nav a:hover > span,
.post-nav a:focus-visible > span {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.post-nav a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}

.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 1rem 0;
  font-size: 0.9rem;
}

.post-tags__item {
  color: var(--muted);
}

/* Photo posts: several photographs in a wider column without a table of contents. */
.photo-post .post-layout {
  grid-template-columns: 1fr;
}

.photo-post .post-content {
  grid-column: 1;
  max-width: var(--photo-width);
  padding-right: 3rem;
  padding-left: 3rem;
}

.photo-post .post-toc {
  display: none;
}

.photo-post .markdown-body > p:first-child {
  max-width: var(--column-width);
  margin-right: auto;
  margin-left: auto;
}

.photo-post .markdown-body p > img,
.photo-post .markdown-body p > a > img,
.photo-post .markdown-body figure > img,
.photo-post .markdown-body figure > a > img {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 3rem auto 0;
  border-radius: 2px;
  box-shadow: none;
  object-fit: contain;
  object-position: center;
}

.photo-post .markdown-body figcaption.image-caption {
  color: var(--muted);
}

/* Heading anchors, shown on hover. */
.markdown-body .heading-anchor {
  float: left;
  margin-left: -1.25em;
  padding-right: 0.25em;
  color: var(--muted);
  font-size: 0.8em;
  line-height: 1;
  text-decoration: none;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

.markdown-body h1:hover .heading-anchor,
.markdown-body h2:hover .heading-anchor,
.markdown-body h3:hover .heading-anchor,
.markdown-body h4:hover .heading-anchor,
.markdown-body h5:hover .heading-anchor,
.markdown-body h6:hover .heading-anchor,
.markdown-body .heading-anchor:focus-visible {
  opacity: 1;
}

.markdown-body .heading-anchor .icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.1em;
}

/* Image lightbox (dialog). */
.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #eeeae3;
  background: #242424;
  border: 0;
  font-family: var(--font-prose);
}

.lightbox[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.lightbox::backdrop {
  background: #242424;
}

.lightbox__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.5rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) 0.5rem max(1.5rem, env(safe-area-inset-left));
}

.lightbox__count {
  margin: 0;
  color: #bdbab4;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.lightbox__controls {
  display: flex;
  gap: 0.5rem;
}

.lightbox__controls button {
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 0;
  font: 1.5rem/1 Georgia, serif;
  cursor: pointer;
}

.lightbox__controls button:disabled {
  opacity: 0.3;
  cursor: default;
}

.lightbox__controls button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.08);
}

.lightbox__controls button:focus-visible {
  outline: 1px solid #eeeae3;
  outline-offset: -3px;
}

.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  margin: 0 1.5rem max(1.5rem, env(safe-area-inset-bottom));
}

.lightbox__stage img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  filter: none;
}

.lightbox__caption {
  max-height: 20vh;
  margin: -0.5rem auto 0;
  padding: 0 1.5rem max(1rem, env(safe-area-inset-bottom));
  overflow: auto;
  color: #bdbab4;
  font-size: 0.875rem;
  line-height: 1.6;
  text-align: center;
}

@media (max-width: 991.98px) {
  .post-layout {
    display: block;
  }

  .post-content {
    max-width: calc(var(--reading-width) + 4rem);
    padding-right: 2rem;
    padding-left: 2rem;
  }

  .post-toc {
    display: none;
  }
}

@media (max-width: 767px) {
  .page-content,
  .post-content {
    overflow: hidden;
  }

  .photo-post .post-content {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .lightbox__stage {
    margin-right: 0.75rem;
    margin-left: 0.75rem;
  }
}

@media (max-width: 575px) {
  .post-nav__title {
    display: none;
  }

  .post-nav__label {
    display: block;
  }
}

@media (max-width: 424px) {
  .post-content {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .markdown-body .heading-anchor {
    display: none;
  }
}

/* 60-markdown.css */
/*
 * github-markdown-css 4.0.0 — MIT License, Copyright (c) Sindre Sorhus (https://sindresorhus.com)
 * Vendored unchanged except for removing octicon, anchor, task-list and GitHub utility-class rules (the only ones using !important) that Markdown output never produces.
 * Blue Note overrides follow at the end of this file.
 */

.markdown-body {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.5;
  color: #24292e;
  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
  font-size: 16px;
  line-height: 1.5;
  word-wrap: break-word;
}
.markdown-body details {
  display: block;
}
.markdown-body summary {
  display: list-item;
}
.markdown-body a {
  background-color: initial;
}
.markdown-body a:active,
.markdown-body a:hover {
  outline-width: 0;
}
.markdown-body strong {
  font-weight: inherit;
  font-weight: bolder;
}
.markdown-body h1 {
  font-size: 2em;
  margin: .67em 0;
}
.markdown-body img {
  border-style: none;
}
.markdown-body code,
.markdown-body kbd,
.markdown-body pre {
  font-family: monospace,monospace;
  font-size: 1em;
}
.markdown-body hr {
  box-sizing: initial;
  height: 0;
  overflow: visible;
}
.markdown-body input {
  font: inherit;
  margin: 0;
}
.markdown-body input {
  overflow: visible;
}
.markdown-body [type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}
.markdown-body * {
  box-sizing: border-box;
}
.markdown-body input {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
.markdown-body a {
  color: #0366d6;
  text-decoration: none;
}
.markdown-body a:hover {
  text-decoration: underline;
}
.markdown-body strong {
  font-weight: 600;
}
.markdown-body hr {
  height: 0;
  margin: 15px 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #dfe2e5;
}
.markdown-body hr:after,
.markdown-body hr:before {
  display: table;
  content: "";
}
.markdown-body hr:after {
  clear: both;
}
.markdown-body table {
  border-spacing: 0;
  border-collapse: collapse;
}
.markdown-body td,
.markdown-body th {
  padding: 0;
}
.markdown-body details summary {
  cursor: pointer;
}
.markdown-body kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #d1d5da;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 0;
  margin-bottom: 0;
}
.markdown-body h1 {
  font-size: 32px;
}
.markdown-body h1,
.markdown-body h2 {
  font-weight: 600;
}
.markdown-body h2 {
  font-size: 24px;
}
.markdown-body h3 {
  font-size: 20px;
}
.markdown-body h3,
.markdown-body h4 {
  font-weight: 600;
}
.markdown-body h4 {
  font-size: 16px;
}
.markdown-body h5 {
  font-size: 14px;
}
.markdown-body h5,
.markdown-body h6 {
  font-weight: 600;
}
.markdown-body h6 {
  font-size: 12px;
}
.markdown-body p {
  margin-top: 0;
  margin-bottom: 10px;
}
.markdown-body blockquote {
  margin: 0;
}
.markdown-body ol,
.markdown-body ul {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
}
.markdown-body ol ol,
.markdown-body ul ol {
  list-style-type: lower-roman;
}
.markdown-body ol ol ol,
.markdown-body ol ul ol,
.markdown-body ul ol ol,
.markdown-body ul ul ol {
  list-style-type: lower-alpha;
}
.markdown-body dd {
  margin-left: 0;
}
.markdown-body code,
.markdown-body pre {
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 12px;
}
.markdown-body pre {
  margin-top: 0;
  margin-bottom: 0;
}
.markdown-body input::-webkit-inner-spin-button,
.markdown-body input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}
.markdown-body :checked+.radio-label {
  position: relative;
  z-index: 1;
  border-color: #0366d6;
}
.markdown-body .pl-c {
  color: #6a737d;
}
.markdown-body .pl-c1,
.markdown-body .pl-s .pl-v {
  color: #005cc5;
}
.markdown-body .pl-e,
.markdown-body .pl-en {
  color: #6f42c1;
}
.markdown-body .pl-s .pl-s1,
.markdown-body .pl-smi {
  color: #24292e;
}
.markdown-body .pl-ent {
  color: #22863a;
}
.markdown-body .pl-k {
  color: #d73a49;
}
.markdown-body .pl-pds,
.markdown-body .pl-s,
.markdown-body .pl-s .pl-pse .pl-s1,
.markdown-body .pl-sr,
.markdown-body .pl-sr .pl-cce,
.markdown-body .pl-sr .pl-sra,
.markdown-body .pl-sr .pl-sre {
  color: #032f62;
}
.markdown-body .pl-smw,
.markdown-body .pl-v {
  color: #e36209;
}
.markdown-body .pl-bu {
  color: #b31d28;
}
.markdown-body .pl-ii {
  color: #fafbfc;
  background-color: #b31d28;
}
.markdown-body .pl-c2 {
  color: #fafbfc;
  background-color: #d73a49;
}
.markdown-body .pl-c2:before {
  content: "^M";
}
.markdown-body .pl-sr .pl-cce {
  font-weight: 700;
  color: #22863a;
}
.markdown-body .pl-ml {
  color: #735c0f;
}
.markdown-body .pl-mh,
.markdown-body .pl-mh .pl-en,
.markdown-body .pl-ms {
  font-weight: 700;
  color: #005cc5;
}
.markdown-body .pl-mi {
  font-style: italic;
  color: #24292e;
}
.markdown-body .pl-mb {
  font-weight: 700;
  color: #24292e;
}
.markdown-body .pl-md {
  color: #b31d28;
  background-color: #ffeef0;
}
.markdown-body .pl-mi1 {
  color: #22863a;
  background-color: #f0fff4;
}
.markdown-body .pl-mc {
  color: #e36209;
  background-color: #ffebda;
}
.markdown-body .pl-mi2 {
  color: #f6f8fa;
  background-color: #005cc5;
}
.markdown-body .pl-mdr {
  font-weight: 700;
  color: #6f42c1;
}
.markdown-body .pl-ba {
  color: #586069;
}
.markdown-body .pl-sg {
  color: #959da5;
}
.markdown-body .pl-corl {
  text-decoration: underline;
  color: #032f62;
}
.markdown-body hr {
  border-bottom-color: #eee;
}
.markdown-body kbd {
  display: inline-block;
  padding: 3px 5px;
  font: 11px SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  line-height: 10px;
  color: #444d56;
  vertical-align: middle;
  background-color: #fafbfc;
  border: 1px solid #d1d5da;
  border-radius: 3px;
  box-shadow: inset 0 -1px 0 #d1d5da;
}
.markdown-body:after,
.markdown-body:before {
  display: table;
  content: "";
}
.markdown-body:after {
  clear: both;
}
.markdown-body a:not([href]) {
  color: inherit;
  text-decoration: none;
}
.markdown-body blockquote,
.markdown-body details,
.markdown-body dl,
.markdown-body ol,
.markdown-body p,
.markdown-body pre,
.markdown-body table,
.markdown-body ul {
  margin-top: 0;
  margin-bottom: 16px;
}
.markdown-body hr {
  height: .25em;
  padding: 0;
  margin: 24px 0;
  background-color: #e1e4e8;
  border: 0;
}
.markdown-body blockquote {
  padding: 0 1em;
  color: #6a737d;
  border-left: .25em solid #dfe2e5;
}
.markdown-body blockquote>:first-child {
  margin-top: 0;
}
.markdown-body blockquote>:last-child {
  margin-bottom: 0;
}
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 24px;
  margin-bottom: 16px;
  font-weight: 600;
  line-height: 1.25;
}
.markdown-body h1 {
  font-size: 2em;
}
.markdown-body h1,
.markdown-body h2 {
  padding-bottom: .3em;
  border-bottom: 1px solid #eaecef;
}
.markdown-body h2 {
  font-size: 1.5em;
}
.markdown-body h3 {
  font-size: 1.25em;
}
.markdown-body h4 {
  font-size: 1em;
}
.markdown-body h5 {
  font-size: .875em;
}
.markdown-body h6 {
  font-size: .85em;
  color: #6a737d;
}
.markdown-body ol,
.markdown-body ul {
  padding-left: 2em;
}
.markdown-body ol ol,
.markdown-body ol ul,
.markdown-body ul ol,
.markdown-body ul ul {
  margin-top: 0;
  margin-bottom: 0;
}
.markdown-body li {
  word-wrap: break-all;
}
.markdown-body li>p {
  margin-top: 16px;
}
.markdown-body li+li {
  margin-top: .25em;
}
.markdown-body dl {
  padding: 0;
}
.markdown-body dl dt {
  padding: 0;
  margin-top: 16px;
  font-size: 1em;
  font-style: italic;
  font-weight: 600;
}
.markdown-body dl dd {
  padding: 0 16px;
  margin-bottom: 16px;
}
.markdown-body table {
  display: block;
  width: 100%;
  overflow: auto;
}
.markdown-body table th {
  font-weight: 600;
}
.markdown-body table td,
.markdown-body table th {
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}
.markdown-body table tr {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}
.markdown-body table tr:nth-child(2n) {
  background-color: #f6f8fa;
}
.markdown-body img {
  max-width: 100%;
  box-sizing: initial;
  background-color: #fff;
}
.markdown-body img[align=right] {
  padding-left: 20px;
}
.markdown-body img[align=left] {
  padding-right: 20px;
}
.markdown-body code {
  padding: .2em .4em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(27,31,35,.05);
  border-radius: 3px;
}
.markdown-body pre {
  word-wrap: normal;
}
.markdown-body pre>code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}
.markdown-body .highlight {
  margin-bottom: 16px;
}
.markdown-body .highlight pre {
  margin-bottom: 0;
  word-break: normal;
}
.markdown-body .highlight pre,
.markdown-body pre {
  padding: 16px;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  background-color: #f6f8fa;
  border-radius: 3px;
}
.markdown-body pre code {
  display: inline;
  max-width: auto;
  padding: 0;
  margin: 0;
  overflow: visible;
  line-height: inherit;
  word-wrap: normal;
  background-color: initial;
  border: 0;
}
.markdown-body .commit-tease-sha {
  display: inline-block;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 90%;
  color: #444d56;
}
.markdown-body .full-commit .btn-outline:not(:disabled):hover {
  color: #005cc5;
  border-color: #005cc5;
}
.markdown-body .blob-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
}
.markdown-body .blob-wrapper-embedded {
  max-height: 240px;
  overflow-y: auto;
}
.markdown-body .blob-num {
  width: 1%;
  min-width: 50px;
  padding-right: 10px;
  padding-left: 10px;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 12px;
  line-height: 20px;
  color: rgba(27,31,35,.3);
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.markdown-body .blob-num:hover {
  color: rgba(27,31,35,.6);
}
.markdown-body .blob-num:before {
  content: attr(data-line-number);
}
.markdown-body .blob-code {
  position: relative;
  padding-right: 10px;
  padding-left: 10px;
  line-height: 20px;
  vertical-align: top;
}
.markdown-body .blob-code-inner {
  overflow: visible;
  font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
  font-size: 12px;
  color: #24292e;
  word-wrap: normal;
  white-space: pre;
}
.markdown-body .pl-token.active,
.markdown-body .pl-token:hover {
  cursor: pointer;
  background: #ffea7f;
}
.markdown-body .tab-size[data-tab-size="1"] {
  -moz-tab-size: 1;
  tab-size: 1;
}
.markdown-body .tab-size[data-tab-size="2"] {
  -moz-tab-size: 2;
  tab-size: 2;
}
.markdown-body .tab-size[data-tab-size="3"] {
  -moz-tab-size: 3;
  tab-size: 3;
}
.markdown-body .tab-size[data-tab-size="4"] {
  -moz-tab-size: 4;
  tab-size: 4;
}
.markdown-body .tab-size[data-tab-size="5"] {
  -moz-tab-size: 5;
  tab-size: 5;
}
.markdown-body .tab-size[data-tab-size="6"] {
  -moz-tab-size: 6;
  tab-size: 6;
}
.markdown-body .tab-size[data-tab-size="7"] {
  -moz-tab-size: 7;
  tab-size: 7;
}
.markdown-body .tab-size[data-tab-size="8"] {
  -moz-tab-size: 8;
  tab-size: 8;
}
.markdown-body .tab-size[data-tab-size="9"] {
  -moz-tab-size: 9;
  tab-size: 9;
}
.markdown-body .tab-size[data-tab-size="10"] {
  -moz-tab-size: 10;
  tab-size: 10;
}
.markdown-body .tab-size[data-tab-size="11"] {
  -moz-tab-size: 11;
  tab-size: 11;
}
.markdown-body .tab-size[data-tab-size="12"] {
  -moz-tab-size: 12;
  tab-size: 12;
}


/* Restored from github-markdown-css: the first and last block in a body carry no outer margin. */
.markdown-body > :first-child {
  margin-top: 0 !important;
}

.markdown-body > :last-child {
  margin-bottom: 0 !important;
}

/* Mechanical typesetting for mixed Chinese and Latin text: a hairline of space where Han
   characters meet Latin letters or digits (no space is added where the author typed one),
   and body paragraphs set flush on both edges, as Chinese text is. Justification only
   spreads the slack a Latin word leaves at the end of a line; Chinese lines are already
   full. No text-wrap: pretty here: WebKit re-balances every line with it, which cuts
   Chinese lines short and leaves a ragged right edge. */
.markdown-body {
  text-autospace: normal;
}

.markdown-body > p {
  text-align: justify;
}

/* Quotation marks, dashes and ellipses in Chinese text, marked at build time
   (`cjk_punctuation`). No tracking, so a doubled —— joins into one line. */
.cjk-punct {
  font-family: var(--font-cjk, serif);
  letter-spacing: 0;
}

/* A quote against another full-width mark takes its half-width form. */
.cjk-punct--tight {
  font-feature-settings: "halt";
}

/* 65-markdown-overrides.css */
/* Theme overrides on top of github-markdown-css: colours from tokens, serif type,
   quieter headings, images without shadows, code blocks in the paper palette. */
.markdown-body {
  margin-bottom: 2rem;
  color: var(--prose);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.6;
}

.markdown-body > h1,
.markdown-body > h2 {
  border-bottom-color: var(--line);
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin-top: 2em;
  margin-bottom: 0.75em;
  color: var(--heading);
  font-weight: bold;
  transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
}

/* Leave breathing room above in-page heading targets. */
.markdown-body > h1::before,
.markdown-body > h2::before,
.markdown-body > h3::before,
.markdown-body > h4::before,
.markdown-body > h5::before,
.markdown-body > h6::before {
  display: block;
  width: 1px;
  height: 5rem;
  margin-top: -5rem;
  content: "";
  visibility: hidden;
}

.markdown-body h1:focus,
.markdown-body h2:focus,
.markdown-body h3:focus,
.markdown-body h4:focus,
.markdown-body h5:focus,
.markdown-body h6:focus {
  outline: none;
}

.markdown-body a {
  color: var(--link);
}

.markdown-body strong {
  font-weight: bold;
}

.markdown-body code {
  background-color: var(--inline-code-bg);
  tab-size: 4;
  transition: background-color 0.2s ease-in-out;
}

.markdown-body table tr,
.markdown-body table tr:nth-child(2n) {
  background-color: transparent;
  transition: background-color 0.2s ease-in-out;
}

.markdown-body table th,
.markdown-body table td {
  border-color: var(--line);
  transition: border-color 0.2s ease-in-out;
}

.markdown-body pre {
  font-size: 85%;
}

.markdown-body .highlight pre,
.markdown-body pre {
  padding: 1.45rem 1rem;
}

.markdown-body .hljs,
.markdown-body .highlight pre,
.markdown-body pre,
.markdown-body .code-wrapper pre,
.markdown-body figure.highlight td.gutter {
  background-color: var(--code-bg);
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.markdown-body .code-wrapper {
  position: relative;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.markdown-body figure.highlight {
  position: relative;
}

.markdown-body figure.highlight table {
  width: auto;
  margin: 0;
  border: 0;
  border-radius: 4px;
}

.markdown-body figure.highlight td,
.markdown-body figure.highlight tr {
  padding: 0;
  border: 0;
}

.markdown-body figure.highlight td.code {
  width: 100%;
}

.markdown-body figure.highlight td.gutter {
  position: sticky;
  left: 0;
  z-index: 1;
  display: table-cell;
}

.markdown-body figure.highlight td.gutter pre {
  padding: 0 0.75rem;
  border-right: 1px solid #999;
  border-radius: 0;
  text-align: right;
}

.markdown-body figure.highlight td.gutter span.line {
  color: #999;
}

.markdown-body figure.highlight td.code > pre {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.markdown-body p > img,
.markdown-body p > a > img,
.markdown-body figure > img,
.markdown-body figure > a > img {
  display: block;
  max-width: 90%;
  margin: 1.5rem auto;
  background-color: transparent;
  border-radius: 4px;
  box-shadow: none;
}

.markdown-body figure.figure {
  margin: 0 0 1.15em;
}

.markdown-body figcaption.image-caption {
  margin: -0.75rem auto 2rem;
  color: var(--prose);
  font-size: 0.8rem;
  line-height: 1;
  text-align: center;
  opacity: 0.65;
}

.markdown-body figcaption:not(.image-caption) {
  display: none;
}

.markdown-body blockquote {
  color: var(--muted);
}

.markdown-body details {
  cursor: pointer;
}

.markdown-body details summary {
  outline: none;
}

.markdown-body hr {
  height: 0;
  margin: 2rem 0;
  background-color: initial;
  border-top: 1px solid var(--line);
}

.markdown-body img {
  max-width: 100%;
  object-fit: cover;
}

/* The nonbreaking space keeps the end mark attached to the final text. The
   square has no text glyph, so it does not enter copy/paste or search content. */
.markdown-body a.post-end {
  position: relative;
  display: inline;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  border: 0;
  padding: 0;
}
.post-end > span {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: currentColor;
  vertical-align: 0.08em;
}
.post-end::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.markdown-body a.post-end:hover,
.markdown-body a.post-end:focus-visible {
  color: var(--index-hover, var(--link));
  text-decoration: none;
}
.markdown-body a.post-end:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}
.post-end-line {
  max-width: var(--reading-width);
  margin: 1rem auto 0;
  text-align: center;
}
.post-end-line > a.post-end {
  display: inline-block;
  /* The prose separator must not offset a standalone square's centre. */
  font-size: 0;
  line-height: 1;
  letter-spacing: 0;
}

/* 70-panels.css */
/* Literary blocks: a quiet framed panel for quotations, formulas and signals, and an
   open verse block with rules above and below. */
.markdown-body .literary-block {
  box-sizing: border-box;
  color: var(--prose);
}

.markdown-body .literary-panel,
.markdown-body .literary-block--signal {
  box-sizing: border-box;
  max-width: 48rem;
  margin: 0 auto 2.5rem;
  padding: 1.75rem 1.65rem 1.6rem;
  color: var(--prose);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
}

.markdown-body .literary-block__section {
  text-align: center;
}

.markdown-body .literary-block__section p {
  margin: 0;
  font-family: var(--font-math);
  font-size: 1.06rem;
  line-height: 1.75;
}

.markdown-body .literary-block__section--opening p + p {
  margin-top: 0.12rem;
}

.markdown-body .literary-block__divider {
  width: 3.5rem;
  margin: 1.35rem auto 1.25rem;
  border-top: 1px solid var(--line);
}

.markdown-body .literary-block__section .literary-block__emphasis {
  font-size: 1.11rem;
  font-weight: 600;
  letter-spacing: 0.075em;
}

.markdown-body .literary-block__section .literary-block__note {
  margin-top: 0.65rem;
  color: var(--muted);
  font-family: "Songti SC", "Noto Serif CJK SC", "Source Han Serif SC", STSong, Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.65;
}

.markdown-body .literary-block__title {
  font-family: var(--font-math);
  font-style: italic;
}

.markdown-body .literary-block--verse {
  max-width: 34rem;
  margin: 2.75rem auto 1rem;
  padding: 2rem 1rem;
  text-align: center;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.markdown-body .literary-block--verse p {
  margin: 0;
  font-family: var(--font-math);
  font-size: 1.08rem;
  line-height: 2.05;
}

.markdown-body .literary-block--verse p:nth-child(5) {
  margin-top: 0.85rem;
}

@media (max-width: 767px) {
  .markdown-body .literary-panel,
  .markdown-body .literary-block--signal {
    padding: 1.45rem 1.1rem 1.35rem;
  }

  .markdown-body .literary-block__section p {
    font-size: 0.98rem;
  }

  .markdown-body .literary-block__section .literary-block__emphasis {
    font-size: 0.95rem;
    letter-spacing: 0.02em;
  }

  .markdown-body .literary-block--verse {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }
}

/* 80-highlight.css */
/*
 * Code block colours: highlight.js 11.12.0 "github" (light) and "dark" themes.
 * BSD-3-Clause License, Copyright (c) 2006 Ivan Sagalaev and contributors. Selectors are scoped by colour scheme.
 */
.markdown-body pre code.hljs { display: block; overflow-x: auto; padding: 0; }
.hljs { color: #24292e; background: #ffffff; }
.hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ { color: #d73a49; }
.hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ { color: #6f42c1; }
.hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id { color: #005cc5; }
.hljs-regexp, .hljs-string, .hljs-meta .hljs-string { color: #032f62; }
.hljs-built_in, .hljs-symbol { color: #e36209; }
.hljs-comment, .hljs-code, .hljs-formula { color: #6a737d; }
.hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo { color: #22863a; }
.hljs-subst { color: #24292e; }
.hljs-section { color: #005cc5; font-weight: bold; }
.hljs-bullet { color: #735c0f; }
.hljs-emphasis { color: #24292e; font-style: italic; }
.hljs-strong { color: #24292e; font-weight: bold; }
.hljs-addition { color: #22863a; background-color: #f0fff4; }
.hljs-deletion { color: #b31d28; background-color: #ffeef0; }
@media (prefers-color-scheme: dark) {
:root:not([data-scheme="light"]) .hljs { color: #ddd; background: #303030; }
:root:not([data-scheme="light"]) .hljs-keyword, :root:not([data-scheme="light"]) .hljs-selector-tag, :root:not([data-scheme="light"]) .hljs-literal, :root:not([data-scheme="light"]) .hljs-section, :root:not([data-scheme="light"]) .hljs-link { color: white; }
:root:not([data-scheme="light"]) .hljs-string, :root:not([data-scheme="light"]) .hljs-title, :root:not([data-scheme="light"]) .hljs-name, :root:not([data-scheme="light"]) .hljs-type, :root:not([data-scheme="light"]) .hljs-attribute, :root:not([data-scheme="light"]) .hljs-symbol, :root:not([data-scheme="light"]) .hljs-bullet, :root:not([data-scheme="light"]) .hljs-built_in, :root:not([data-scheme="light"]) .hljs-addition, :root:not([data-scheme="light"]) .hljs-variable, :root:not([data-scheme="light"]) .hljs-template-tag, :root:not([data-scheme="light"]) .hljs-template-variable { color: #d88; }
:root:not([data-scheme="light"]) .hljs-comment, :root:not([data-scheme="light"]) .hljs-quote, :root:not([data-scheme="light"]) .hljs-deletion, :root:not([data-scheme="light"]) .hljs-meta { color: #979797; }
:root:not([data-scheme="light"]) .hljs-keyword, :root:not([data-scheme="light"]) .hljs-selector-tag, :root:not([data-scheme="light"]) .hljs-literal, :root:not([data-scheme="light"]) .hljs-title, :root:not([data-scheme="light"]) .hljs-section, :root:not([data-scheme="light"]) .hljs-doctag, :root:not([data-scheme="light"]) .hljs-type, :root:not([data-scheme="light"]) .hljs-name, :root:not([data-scheme="light"]) .hljs-strong { font-weight: bold; }
:root:not([data-scheme="light"]) .hljs-emphasis { font-style: italic; }
}
:root[data-scheme="dark"] .hljs { color: #ddd; background: #303030; }
:root[data-scheme="dark"] .hljs-keyword, :root[data-scheme="dark"] .hljs-selector-tag, :root[data-scheme="dark"] .hljs-literal, :root[data-scheme="dark"] .hljs-section, :root[data-scheme="dark"] .hljs-link { color: white; }
:root[data-scheme="dark"] .hljs-string, :root[data-scheme="dark"] .hljs-title, :root[data-scheme="dark"] .hljs-name, :root[data-scheme="dark"] .hljs-type, :root[data-scheme="dark"] .hljs-attribute, :root[data-scheme="dark"] .hljs-symbol, :root[data-scheme="dark"] .hljs-bullet, :root[data-scheme="dark"] .hljs-built_in, :root[data-scheme="dark"] .hljs-addition, :root[data-scheme="dark"] .hljs-variable, :root[data-scheme="dark"] .hljs-template-tag, :root[data-scheme="dark"] .hljs-template-variable { color: #d88; }
:root[data-scheme="dark"] .hljs-comment, :root[data-scheme="dark"] .hljs-quote, :root[data-scheme="dark"] .hljs-deletion, :root[data-scheme="dark"] .hljs-meta { color: #979797; }
:root[data-scheme="dark"] .hljs-keyword, :root[data-scheme="dark"] .hljs-selector-tag, :root[data-scheme="dark"] .hljs-literal, :root[data-scheme="dark"] .hljs-title, :root[data-scheme="dark"] .hljs-section, :root[data-scheme="dark"] .hljs-doctag, :root[data-scheme="dark"] .hljs-type, :root[data-scheme="dark"] .hljs-name, :root[data-scheme="dark"] .hljs-strong { font-weight: bold; }
:root[data-scheme="dark"] .hljs-emphasis { font-style: italic; }

/* 85-search.css */
/* Site search panel (optional module; needs hexo-generator-search). */
.site-search-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1220;
  display: grid;
  padding: clamp(4.5rem, 10vh, 7rem) 1rem 2rem;
  overflow-y: auto;
  place-items: start center;
  background: rgba(8, 13, 17, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.site-search-dialog {
  position: relative;
  width: min(100%, 42rem);
  max-height: min(76vh, 42rem);
  overflow: hidden;
  color: #3e3a34;
  background: #f1ece2;
  border: 1px solid rgba(62, 58, 52, 0.16);
  box-shadow: 0 1.6rem 5rem rgba(0, 0, 0, 0.32);
}

.site-search-dialog__close {
  position: relative;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  color: #777168;
  background: transparent;
  border: 0;
  font-size: 0;
  cursor: pointer;
}

.site-search-dialog__close::before,
.site-search-dialog__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1px;
  background: currentColor;
  border-radius: 1px;
  content: "";
  transform: translate(-50%, -50%) rotate(45deg);
}

.site-search-dialog__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.site-search-dialog__field {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  min-height: 4.5rem;
  padding: 0 1rem;
  color: #777168;
}

.site-search-dialog__icon {
  width: 1.15rem;
  height: 1.15rem;
  justify-self: center;
}

.site-search-dialog__field input {
  flex: 1;
  min-width: 0;
  padding: 0;
  color: #2d2b27;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: "Songti SC", "Noto Serif CJK SC", STSong, Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.25;
}

.site-search-dialog__field input::placeholder {
  color: #9a948b;
}

.site-search-dialog__field input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

.site-search-results {
  max-height: calc(min(76vh, 42rem) - 4.5rem);
  overflow-y: auto;
}

.site-search-results:empty {
  display: none;
}

.site-search-status {
  margin: 0;
  padding: 1rem 1.6rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.site-search-status button {
  margin-left: 1rem;
  padding: 0.25rem 0.5rem;
  color: var(--link);
  background: transparent;
  border: 1px solid var(--line);
  font: inherit;
  cursor: pointer;
}

.site-search-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
  padding: 1rem 1.6rem;
  color: #3e3a34;
  border-bottom: 1px solid rgba(62, 58, 52, 0.12);
  transition: color 150ms ease, background-color 150ms ease;
}

.site-search-result:first-child {
  margin-top: 0.35rem;
}

.site-search-result:last-child {
  border-bottom: 0;
}

.site-search-result:hover,
.site-search-result:focus-visible {
  color: #435d70;
  background: rgba(99, 117, 131, 0.08);
}

.site-search-result__title {
  overflow: hidden;
  font-family: "Songti SC", "Noto Serif CJK SC", STSong, Georgia, serif;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-search-result__excerpt {
  grid-column: 1 / -1;
  color: #777168;
  font-size: 0.82rem;
  line-height: 1.55;
}

.site-search-result__privacy {
  display: inline-flex;
  align-items: center;
  align-self: center;
  color: #777168;
}

.site-search-result__privacy .private-lock-icon {
  width: 0.72rem;
  height: 0.72rem;
}

/* Dark scheme: system preference unless the reader chose light, or an explicit choice of dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .site-search-dialog {
    color: #dedad2;
    background: #302f2d;
    border-color: rgba(222, 218, 210, 0.16);
  }

  :root:not([data-scheme="light"]) .site-search-dialog__close,
  :root:not([data-scheme="light"]) .site-search-dialog__field,
  :root:not([data-scheme="light"]) .site-search-result__excerpt,
  :root:not([data-scheme="light"]) .site-search-result__privacy {
    color: #aaa59d;
  }

  :root:not([data-scheme="light"]) .site-search-dialog__field input,
  :root:not([data-scheme="light"]) .site-search-result {
    color: #dedad2;
  }

  :root:not([data-scheme="light"]) .site-search-result {
    border-color: rgba(222, 218, 210, 0.13);
  }

  :root:not([data-scheme="light"]) .site-search-result:hover,
  :root:not([data-scheme="light"]) .site-search-result:focus-visible {
    color: #d0d5d8;
    background: rgba(184, 192, 197, 0.08);
  }
}

:root[data-scheme="dark"] .site-search-dialog {
  color: #dedad2;
  background: #302f2d;
  border-color: rgba(222, 218, 210, 0.16);
}

:root[data-scheme="dark"] .site-search-dialog__close,
:root[data-scheme="dark"] .site-search-dialog__field,
:root[data-scheme="dark"] .site-search-result__excerpt,
:root[data-scheme="dark"] .site-search-result__privacy {
  color: #aaa59d;
}

:root[data-scheme="dark"] .site-search-dialog__field input,
:root[data-scheme="dark"] .site-search-result {
  color: #dedad2;
}

:root[data-scheme="dark"] .site-search-result {
  border-color: rgba(222, 218, 210, 0.13);
}

:root[data-scheme="dark"] .site-search-result:hover,
:root[data-scheme="dark"] .site-search-result:focus-visible {
  color: #d0d5d8;
  background: rgba(184, 192, 197, 0.08);
}

@media (max-width: 575px) {
  .site-search-overlay {
    padding: 4.25rem 0.75rem 1rem;
    place-items: start stretch;
  }

  .site-search-dialog {
    width: 100%;
    max-height: calc(100svh - 5.25rem);
  }

  .site-search-dialog__field {
    gap: 0.35rem;
    min-height: 4.25rem;
    padding: 0 0.75rem;
  }

  .site-search-result {
    padding-right: 1.2rem;
    padding-left: 1.2rem;
  }

  .site-search-results {
    max-height: calc(100svh - 10rem);
  }
}

/* 88-interactions.css */
/* One dark-mode feedback colour for live links and controls. Keep resting
   colours, light-mode palettes, photographs and existing focus outlines. */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) :is(a[href], button:not(:disabled), summary):not([aria-disabled="true"]):is(:hover, :focus-visible),
  :root:not([data-scheme="light"]) a[href]:not([aria-disabled="true"]):is(:hover, :focus-visible) :is(.listing__title, .letterbox-entry__title, .home-folio-title span) {
    color: var(--interaction-hover, var(--accent));
  }

  :root:not([data-scheme="light"]) .site-nav__toggle:is(:hover, :focus-visible) .site-nav__burger span {
    background-color: var(--interaction-hover, var(--accent));
  }
}

:root[data-scheme="dark"] :is(a[href], button:not(:disabled), summary):not([aria-disabled="true"]):is(:hover, :focus-visible),
:root[data-scheme="dark"] a[href]:not([aria-disabled="true"]):is(:hover, :focus-visible) :is(.listing__title, .letterbox-entry__title, .home-folio-title span) {
  color: var(--interaction-hover, var(--accent));
}

:root[data-scheme="dark"] .site-nav__toggle:is(:hover, :focus-visible) .site-nav__burger span {
  background-color: var(--interaction-hover, var(--accent));
}

/* 90-print.css */
@media print {
  .site-header,
  .site-footer,
  .post-toc,
  .post-nav,
  .home-cover,
  .letterbox-frame,
  .letterbox-dock,
  .lightbox,
  .site-search-overlay {
    display: none !important;
  }

  html[data-design="letterbox"] body {
    display: block;
    padding-top: 0;
    background: #fff;
  }

  html[data-design="letterbox"] body::before {
    content: none;
  }

  body {
    color: #000;
    background: #fff;
  }

  .markdown-body a:not([href^='#']):not([href^='javascript:']):not(.print-no-link)::after {
    color: #000;
    font-size: 0.8rem;
    content: ' (' attr(href) ')';
    opacity: 0.8;
  }

  .markdown-body > h1,
  .markdown-body > h2 {
    border-bottom-color: transparent !important;
  }

  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3,
  .markdown-body h4,
  .markdown-body h5,
  .markdown-body h6 {
    margin-top: 1.25em !important;
    margin-bottom: 0.25em !important;
  }

  .markdown-body .heading-anchor {
    display: none;
  }

  .markdown-body figure.highlight table,
  .markdown-body figure.highlight tbody,
  .markdown-body figure.highlight tr,
  .markdown-body figure.highlight td.code,
  .markdown-body figure.highlight td.code pre {
    display: block !important;
    width: 100% !important;
  }

  .markdown-body figure.highlight pre > code {
    white-space: pre-wrap;
  }

  .markdown-body figure.highlight .gutter {
    display: none !important;
  }
}