@charset "UTF-8";

@font-face {
   font-family: "et-book";
   src: url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot");
   src:
      url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.eot?#iefix")
         format("embedded-opentype"),
      url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.woff")
         format("woff"),
      url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.ttf")
         format("truetype"),
      url("et-book/et-book-roman-line-figures/et-book-roman-line-figures.svg#etbookromanosf")
         format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "et-book";
   src: url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot");
   src:
      url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.eot?#iefix")
         format("embedded-opentype"),
      url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.woff")
         format("woff"),
      url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.ttf")
         format("truetype"),
      url("et-book/et-book-display-italic-old-style-figures/et-book-display-italic-old-style-figures.svg#etbookromanosf")
         format("svg");
   font-weight: normal;
   font-style: italic;
   font-display: swap;
}

@font-face {
   font-family: "et-book";
   src: url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot");
   src:
      url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.eot?#iefix")
         format("embedded-opentype"),
      url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.woff")
         format("woff"),
      url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.ttf")
         format("truetype"),
      url("et-book/et-book-bold-line-figures/et-book-bold-line-figures.svg#etbookromanosf")
         format("svg");
   font-weight: bold;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "et-book-roman-old-style";
   src: url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot");
   src:
      url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.eot?#iefix")
         format("embedded-opentype"),
      url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.woff")
         format("woff"),
      url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.ttf")
         format("truetype"),
      url("et-book/et-book-roman-old-style-figures/et-book-roman-old-style-figures.svg#etbookromanosf")
         format("svg");
   font-weight: normal;
   font-style: normal;
   font-display: swap;
}

:root {
   --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
   --text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
   --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
   --text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
   --text-xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);
   --text-2xl: clamp(2rem, 1.4rem + 2.5vw, 3rem);

   --space-1: 0.25rem;
   --space-2: 0.5rem;
   --space-3: 0.75rem;
   --space-4: 1rem;
   --space-5: 1.25rem;
   --space-6: 1.5rem;
   --space-8: 2rem;
   --space-10: 2.5rem;
   --space-12: 3rem;
   --space-16: 4rem;

   --bg: #fafafa;
   --surface: #f3f3f3;
   --fg: #1a1a1a;
   --fg-muted: #5a5a5a;
   --fg-faint: #9a9a9a;
   --border: rgba(0, 0, 0, 0.1);
   --border-strong: rgba(0, 0, 0, 0.18);

   --transition: 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
   --bg: #1a1a1a;
   --surface: #242424;
   --fg: #f0f0f0;
   --fg-muted: #999999;
   --fg-faint: #5c5c5c;
   --border: rgba(255, 255, 255, 0.09);
   --border-strong: rgba(255, 255, 255, 0.16);
}

@media (prefers-color-scheme: dark) {
   :root:not([data-theme]) {
      --bg: #1a1a1a;
      --surface: #242424;
      --fg: #f0f0f0;
      --fg-muted: #999999;
      --fg-faint: #5c5c5c;
      --border: rgba(255, 255, 255, 0.09);
      --border-strong: rgba(255, 255, 255, 0.16);
   }
}

html {
   font-size: 16px;
   -webkit-text-size-adjust: none;
   text-size-adjust: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
   scroll-behavior: smooth;
   hanging-punctuation: first last;
   scroll-padding-top: var(--space-8);
}

img,
picture,
video,
canvas {
   display: block;
   max-width: 100%;
   height: auto;
}

svg {
   max-width: 100%;
   height: auto;
}

input,
button,
textarea,
select {
   font: inherit;
   color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   text-wrap: balance;
}

p,
li,
figcaption {
   text-wrap: pretty;
}

button {
   cursor: pointer;
   background: none;
   border: none;
}

::selection {
   background: rgba(0, 0, 0, 0.12);
   color: var(--fg);
}

/* FIX: the original rule mixed a selector list with an @media block in one
   prelude, which is invalid CSS and gets dropped entirely by the parser.
   Split into two independent, valid rules. */
[data-theme="dark"] ::selection {
   background: rgba(255, 255, 255, 0.15);
}

@media (prefers-color-scheme: dark) {
   :root:not([data-theme]) ::selection {
      background: rgba(255, 255, 255, 0.15);
   }
}

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

@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

body {
   font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD",
      "Book Antiqua", Georgia, serif;
   font-size: var(--text-base);
   color: var(--fg);
   background: var(--bg);
   line-height: 1.5;
   min-height: 100dvh;
   max-width: min(87.5%, 1440px);
   margin-inline: auto;
   padding-block: var(--space-8);
}

a {
   color: var(--fg);
   text-decoration: underline;
   text-underline-offset: 0.2em;
   text-decoration-color: var(--border-strong);
   transition: text-decoration-color var(--transition);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: normal;
   font-style: italic;
   line-height: 1.05;
   margin-top: var(--space-10);
   margin-bottom: var(--space-6);
}

h1 {
   font-size: var(--text-2xl);
}
h2 {
   font-size: var(--text-xl);
}
h3 {
   font-size: var(--text-lg);
}
h4,
h5,
h6 {
   font-size: var(--text-base);
}

.bottom-nav {
   position: fixed;
   bottom: var(--space-8);
   right: calc((100vw - min(87.5vw, 1440px)) / 2);
   z-index: 10;
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2) var(--space-4);
   font-size: var(--text-sm);
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   transition:
      opacity var(--transition),
      visibility var(--transition);
}

.bottom-nav.is-visible {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
}

.bottom-nav a {
   text-decoration: none;
}

.metadata {
   color: var(--fg-muted);
   font-size: var(--text-sm);
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-2) var(--space-3);
}

.description {
   font-size: var(--text-base);
   line-height: 1.45;
   color: var(--fg-muted);
}

.main-content {
   padding-bottom: calc(var(--space-16) + var(--space-8));
}

.main-content > * + *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) {
   margin-top: var(--space-4);
}

body.home-page {
   display: flex;
   flex-direction: column;
   min-height: calc(100dvh + var(--space-12));
}

.home-page .main-content {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   min-height: 0;
   padding-top: var(--space-8);
   margin-top: 0;
}

.home-page .main-content > * + * {
   margin-top: 0;
}

.home-nav {
   flex: 1 1 auto;
   display: grid;
   grid-template-rows: repeat(4, minmax(0, 1fr));
   min-height: 0;
}

.home-nav-item {
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 0;
   text-decoration: none;
   transition: color var(--transition);
}

.home-nav-label {
   display: block;
   width: 100%;
   padding-inline: var(--space-4);
   font-size: clamp(3.5rem, 8.75vw, 11rem);
   font-style: normal;
   text-transform: uppercase;
   text-align: justify;
   text-align-last: justify;
   text-justify: inter-character;
   line-height: 1;
   text-decoration: underline;
   text-decoration-color: transparent;
   text-decoration-thickness: 1px;
   text-underline-offset: 0.12em;
   transition: text-decoration-color var(--transition);
}

.home-nav-item:hover .home-nav-label {
   text-decoration-color: var(--fg);
}

.home-nav-label::after {
   content: "";
   display: inline-block;
   width: 100%;
}

.footnote {
   font-size: var(--text-sm);
   color: var(--fg-muted);
}

.footnote sup {
   margin-right: var(--space-1);
}

.l1-list,
.l2-list,
.l3-list {
   margin-bottom: var(--space-2);
   line-height: 1.2;
}

.l1-list::before {
   content: "•";
   color: var(--fg-faint);
   margin-left: var(--space-6);
   margin-right: var(--space-2);
   font-size: 0.85em;
}

.l2-list::before {
   content: "◦";
   color: var(--fg-faint);
   margin-right: var(--space-2);
   margin-left: var(--space-8);
   font-size: 0.85em;
   opacity: 0.75;
}

.l3-list::before {
   content: "▪";
   color: var(--fg-faint);
   margin-right: var(--space-2);
   margin-left: var(--space-10);
   font-size: 0.85em;
   opacity: 0.55;
}

blockquote.callout {
   font-style: italic;
   padding-left: var(--space-4);
   border-left: 1px solid var(--border-strong);
   color: var(--fg-muted);
   margin-block: var(--space-6);
}

i {
   font-style: italic;
}

strong {
   font-weight: bold;
}

.constellation {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-3);
   margin-top: var(--space-8);
}

.insert-container {
   width: 100%;
   margin-block: var(--space-6);
   overflow-x: auto;
}

code.inlinecode {
   font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code",
      Menlo, Consolas, monospace;
   font-size: var(--text-sm);
   color: var(--fg-muted);
}

pre {
   font-family: ui-monospace, "Cascadia Code", "JetBrains Mono", "Fira Code",
      Menlo, Consolas, monospace;
   font-size: var(--text-sm);
   background: var(--surface);
   border: 1px solid var(--border);
   border-radius: 4px;
   padding: var(--space-4);
   overflow-x: auto;
   line-height: 1.45;
}

pre code {
   color: inherit;
}

pre.verbatim code {
   color: var(--fg);
}

.raw-block {
   margin: 0;
   padding: 0;
   border: none;
   background: none;
}

pre code .keyword {
   color: #111111;
   font-weight: bold;
}
pre code .type {
   color: #2e2e2e;
   font-style: italic;
}
pre code .function {
   color: #1a1a1a;
}
pre code .string {
   color: #5e5e5e;
}
pre code .comment {
   color: #a0a0a0;
   font-style: italic;
}
pre code .variable {
   color: #383838;
}
pre code .property {
   color: #484848;
}
pre code .constant {
   color: #161616;
   font-weight: bold;
}
pre code .operator {
   color: #6a6a6a;
}
pre code .punctuation {
   color: #7a7a7a;
}
pre code .number {
   color: #525252;
}
pre code .module {
   color: #1c1c1c;
}
pre code .constructor {
   color: #282828;
   font-weight: bold;
}
pre code .tag {
   color: #0e0e0e;
}
pre code .attribute {
   color: #606060;
}

pre code .punctuation.bracket {
   color: #6a6a6a;
}
pre code .punctuation.delimiter {
   color: #8a8a8a;
}
pre code .punctuation.special {
   color: #585858;
}
pre code .string.special {
   color: #4a4a4a;
}
pre code .type.builtin {
   color: #343434;
   font-style: italic;
}
pre code .function.builtin {
   color: #141414;
}
pre code .constant.builtin {
   color: #0c0c0c;
   font-weight: bold;
}
pre code .variable.builtin {
   color: #323232;
}
pre code .variable.parameter {
   color: #444444;
}

[data-theme="dark"] pre code .keyword {
   color: #f2f2f2;
   font-weight: bold;
}
[data-theme="dark"] pre code .type {
   color: #b8ccd4;
   font-style: italic;
} /* cool blue-gray */
[data-theme="dark"] pre code .function {
   color: #e8e8e8;
}
[data-theme="dark"] pre code .string {
   color: #c8b89a;
}
[data-theme="dark"] pre code .comment {
   color: #585858;
   font-style: italic;
}
[data-theme="dark"] pre code .variable {
   color: #c0c0c0;
}
[data-theme="dark"] pre code .property {
   color: #afafaf;
}
[data-theme="dark"] pre code .constant {
   color: #efefef;
   font-weight: bold;
}
[data-theme="dark"] pre code .operator {
   color: #808080;
}
[data-theme="dark"] pre code .punctuation {
   color: #6e6e6e;
}
[data-theme="dark"] pre code .number {
   color: #d4c0a8;
}
[data-theme="dark"] pre code .module {
   color: #e0e0e0;
}
[data-theme="dark"] pre code .constructor {
   color: #d4d4d4;
   font-weight: bold;
}
[data-theme="dark"] pre code .tag {
   color: #f8f8f8;
}
[data-theme="dark"] pre code .attribute {
   color: #909090;
}

[data-theme="dark"] pre code .punctuation.bracket {
   color: #7e7e7e;
}
[data-theme="dark"] pre code .punctuation.delimiter {
   color: #666666;
}
[data-theme="dark"] pre code .punctuation.special {
   color: #949494;
}
[data-theme="dark"] pre code .string.special {
   color: #d0bc9e;
}
[data-theme="dark"] pre code .type.builtin {
   color: #aabfc8;
   font-style: italic;
}
[data-theme="dark"] pre code .function.builtin {
   color: #f0f0f0;
}
[data-theme="dark"] pre code .constant.builtin {
   color: #f5f5f5;
   font-weight: bold;
}
[data-theme="dark"] pre code .variable.builtin {
   color: #c8c8c8;
}
[data-theme="dark"] pre code .variable.parameter {
   color: #b8b8b8;
}