@font-face { font-family: "Adwaita Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/adwaita-sans.woff2") format("woff2"); }
@font-face { font-family: "Adwaita Sans"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/adwaita-sans-italic.woff2") format("woff2"); }
@font-face { font-family: Iosevka; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/iosevka-medium.woff2") format("woff2"); }
@font-face { font-family: Iosevka; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/iosevka-extrabold.woff2") format("woff2"); }
@font-face { font-family: Iosevka; font-style: italic; font-weight: 500; font-display: swap; src: url("/assets/fonts/iosevka-medium-italic.woff2") format("woff2"); }
@font-face { font-family: "Iosevka Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/iosevka-mono.woff2") format("woff2"); }

@-webkit-keyframes card-ripple
{
0% 
{
  transform : translate(-50%, -50%) scale(0);
  opacity   : 0.65;
}

100% 
{
  transform : translate(-50%, -50%) scale(1);
  opacity   : 0;
}

}

@-moz-keyframes card-ripple
{
0% 
{
  transform : translate(-50%, -50%) scale(0);
  opacity   : 0.65;
}

100% 
{
  transform : translate(-50%, -50%) scale(1);
  opacity   : 0;
}

}

@-ms-keyframes card-ripple
{
0% 
{
  transform : translate(-50%, -50%) scale(0);
  opacity   : 0.65;
}

100% 
{
  transform : translate(-50%, -50%) scale(1);
  opacity   : 0;
}

}

@-o-keyframes card-ripple
{
0% 
{
  transform : translate(-50%, -50%) scale(0);
  opacity   : 0.65;
}

100% 
{
  transform : translate(-50%, -50%) scale(1);
  opacity   : 0;
}

}

@keyframes card-ripple
{
0% 
{
  transform : translate(-50%, -50%) scale(0);
  opacity   : 0.65;
}

100% 
{
  transform : translate(-50%, -50%) scale(1);
  opacity   : 0;
}

}

:root
{
  --color-bg             : #f1e7d2;
  --color-surface        : rgba(253, 241, 220, 0.78);
  --color-surface-solid  : #fdf1dc;
  --color-surface-alt    : rgba(242, 230, 196, 0.92);
  --color-border         : rgba(201, 173, 106, 0.7);
  --color-rule           : #c9ad6a;
  --color-rule-text      : #8a6d3b;
  --color-text           : #1f1a12;
  --color-text-muted     : #5a4e3c;
  --color-heading        : #58180d;
  --color-accent         : #6b2214;
  --color-accent-strong  : #58180d;
  --color-accent-soft    : #fdf1dc;
  --color-primary        : #58180d;
  --color-primary-strong : #3f1109;
  --color-gold           : #c8a555;
  --color-cream          : #f2e6c4;
  --color-cover          : #3d1a3d;
  --color-badge-bg       : #f2e6c4;
  --color-badge-text     : #58180d;
  --color-gold-wash      : rgba(201, 173, 106, 0.45);
  --font-sans            : "Adwaita Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display         : Iosevka, "Iosevka NFP", "Iosevka Aile", ui-monospace, monospace;
  --font-mono            : "Iosevka Mono", "Iosevka NFM", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --font-cover           : "Nimbus Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --step-0               : 1rem;
  --step-1               : 1.125rem;
  --step-2               : 1.3rem;
  --step-3               : 1.6rem;
  --step-4               : 2rem;
  --step-5               : 2.6rem;
  --content-width        : 1100px;
  --radius               : 4px;
  --radius-sm            : 3px;
  --shadow-sm            : none;
  --shadow-md            : 0 2px 10px rgba(60, 40, 10, 0.12);
}

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

html
{
  scroll-behavior          : smooth;
  -webkit-text-size-adjust : 100%;
  height                   : 100%;
}

body
{
  margin                 : 0;
  background             : var(--color-bg) url("/assets/parchment.webp") center top / cover no-repeat;
  color                  : var(--color-text);
  font-family            : var(--font-sans);
  font-size              : var(--step-0);
  line-height            : 1.55;
  font-synthesis         : none;
  -webkit-font-smoothing : antialiased;
  text-rendering         : optimizeLegibility;
  height                 : 100vh;
  height                 : 100dvh;
  overflow               : hidden;
  display                : flex;
  flex-direction         : column;
}

::selection
{
  background : var(--color-gold-wash);
}

.app-scroll
{
  flex            : 1 1 auto;
  min-height      : 0;
  overflow-y      : auto;
  scroll-behavior : smooth;
  display         : flex;
  flex-direction  : column;
}

.app-scroll > main
{
  flex : 1 0 auto;
}

.app-scroll > main > section
{
  padding-top : 2rem;
}

.app-chrome
{
  flex-shrink   : 0;
  background    : transparent;
  border-bottom : 1px solid var(--color-rule);
}

.app-chrome > .container
{
  padding-top    : 0.5rem;
  padding-bottom : 0.5rem;
}

.site-footer
{
  flex-shrink : 0;
}

img, svg
{
  max-width : 100%;
  display   : block;
}

a
{
  color                 : var(--color-accent);
  text-decoration       : none;
  text-underline-offset : 3px;
}

a:hover
{
  color           : var(--color-accent-strong);
  text-decoration : underline;
}

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

h1, h2, h3, h4
{
  font-family    : var(--font-display);
  font-weight    : 500;
  letter-spacing : 0;
  line-height    : 1.15;
  margin         : 0 0 0.6em;
  color          : var(--color-heading);
}

h1
{
  font-size      : var(--step-5);
  font-weight    : 800;
  padding-bottom : 0.3em;
  border-bottom  : 1px solid var(--color-rule);
}

h2
{
  font-size      : var(--step-4);
  padding-bottom : 0.2em;
  border-bottom  : 1px solid var(--color-rule);
}

h3
{
  font-size : var(--step-3);
}

h4
{
  font-size   : var(--step-1);
  font-family : var(--font-sans);
  font-weight : 700;
  color       : var(--color-text);
}

p
{
  margin : 0 0 1em;
}

code, kbd, samp
{
  font-family   : var(--font-mono);
  font-size     : 0.92em;
  background    : var(--color-surface-solid);
  padding       : 0.1em 0.35em;
  border-radius : 2px;
}

.skip-link
{
  position      : absolute;
  left          : -10000px;
  top           : 0;
  background    : var(--color-primary);
  color         : var(--color-cream);
  padding       : 0.6rem 1rem;
  border-radius : 0 0 var(--radius-sm) 0;
  z-index       : 100;
}

.skip-link:focus
{
  left : 0;
}

.container
{
  width     : 100%;
  max-width : var(--content-width);
  margin    : 0 auto;
  padding   : 0 1.25rem;
}

section
{
  padding : 3rem 0;
}

.site-header
{
  background    : transparent;
  border-bottom : 1px solid var(--color-rule);
}

.site-header__inner
{
  display         : flex;
  align-items     : center;
  justify-content : space-between;
  gap             : 1rem;
  padding         : 0.8rem 1.25rem;
  max-width       : var(--content-width);
  margin          : 0 auto;
}

.brand
{
  display        : inline-flex;
  align-items    : center;
  gap            : 0.65rem;
  color          : var(--color-heading);
  font-family    : var(--font-display);
  font-weight    : 800;
  letter-spacing : 0;
  font-size      : 1.15rem;
}

.brand:hover
{
  color           : var(--color-heading);
  text-decoration : none;
}

.card-grid
{
  display               : grid;
  grid-template-columns : 1fr;
  gap                   : 1.25rem;
}

.card
{
  background    : var(--color-surface);
  border        : 1px solid var(--color-border);
  border-radius : var(--radius);
  padding       : 1.5rem;
  transition    : border-color 140ms ease, background-color 140ms ease;
  position      : relative;
  overflow      : hidden;
}

.card:hover
{
  border-color : var(--color-rule-text);
}

a.card, .card--link
{
  display         : block;
  color           : inherit;
  text-decoration : none;
}

a.card:hover, .card--link:hover
{
  color           : inherit;
  text-decoration : none;
  background      : var(--color-surface-solid);
}

a.card:active, .card--link:active
{
  border-color        : var(--color-heading);
  background-color    : var(--color-cream);
  transition-duration : 80ms;
}

.card__ripple
{
  position       : absolute;
  pointer-events : none;
  border-radius  : 50%;
  transform      : translate(-50%, -50%) scale(0);
  background     : radial-gradient(circle, var(--color-gold-wash) 0%, var(--color-border) 45%, transparent 70%);
  animation      : card-ripple 620ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.card__icon
{
  width           : 40px;
  height          : 40px;
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  background      : var(--color-cream);
  color           : var(--color-heading);
  border          : 1px solid var(--color-border);
  border-radius   : var(--radius);
  margin-bottom   : 1rem;
}

.card__icon svg
{
  width  : 22px;
  height : 22px;
}

.card h3
{
  font-size     : var(--step-2);
  margin-bottom : 0.4rem;
}

.card p
{
  color         : var(--color-text-muted);
  margin-bottom : 0;
}

.book-cover
{
  width           : 220px;
  height          : 300px;
  border-radius   : 2px;
  background      : var(--color-cover);
  color           : var(--color-gold);
  font-family     : var(--font-cover);
  padding         : 1.6rem 1.35rem;
  display         : flex;
  flex-direction  : column;
  align-items     : center;
  justify-content : space-between;
  text-align      : center;
  box-shadow      : inset 0 0 0 6px var(--color-cover), inset 0 0 0 7.5px var(--color-gold), inset 0 0 0 10px var(--color-cover), inset 0 0 0 11px var(--color-gold), 0 6px 18px rgba(40, 20, 10, 0.3);
  position        : relative;
  overflow        : hidden;
}

.book-cover__kicker
{
  font-size      : 0.6rem;
  font-weight    : 700;
  letter-spacing : 0.22em;
  text-transform : uppercase;
  padding        : 0.35em 0;
  border-top     : 1px solid var(--color-gold);
  border-bottom  : 1px solid var(--color-gold);
}

.book-cover__title
{
  font-size      : 1.6rem;
  line-height    : 1.05;
  font-weight    : 700;
  letter-spacing : -0.01em;
  margin-top     : 0.9rem;
}

.book-cover__lambda
{
  font-family : var(--font-display);
  font-size   : 4rem;
  line-height : 1;
  opacity     : 0.9;
}

.book-cover__meta
{
  background     : var(--color-cream);
  color          : var(--color-cover);
  font-size      : 0.62rem;
  font-weight    : 700;
  letter-spacing : 0.22em;
  text-transform : uppercase;
  padding        : 0.4em 1em;
}

.book-cover--sm
{
  width      : 100px;
  height     : 140px;
  padding    : 0.9rem 0.6rem;
  box-shadow : inset 0 0 0 4px var(--color-cover), inset 0 0 0 5px var(--color-gold), inset 0 0 0 7px var(--color-cover), inset 0 0 0 8px var(--color-gold), 0 3px 10px rgba(40, 20, 10, 0.3);
}

.book-cover--sm .book-cover__kicker
{
  font-size      : 0.45rem;
  letter-spacing : 0.16em;
}

.book-cover--sm .book-cover__title
{
  font-size  : 0.8rem;
  margin-top : 0.45rem;
}

.book-cover--sm .book-cover__lambda
{
  font-size : 1.8rem;
}

.book-cover--lg
{
  width  : 260px;
  height : 360px;
}

.book-cover--lg .book-cover__title
{
  font-size : 1.9rem;
}

.book-cover--lg .book-cover__lambda
{
  font-size : 5rem;
}

.badge
{
  display        : inline-flex;
  align-items    : center;
  gap            : 0.4rem;
  font-family    : var(--font-display);
  font-size      : 0.72rem;
  font-weight    : 500;
  letter-spacing : 0.14em;
  text-transform : uppercase;
  padding        : 0.25rem 0.6rem;
  border-radius  : 2px;
  border         : 1px solid var(--color-border);
  background     : var(--color-badge-bg);
  color          : var(--color-badge-text);
}

.breadcrumb
{
  font-size  : 0.88rem;
  font-style : italic;
  color      : var(--color-rule-text);
}

.breadcrumb a
{
  color : var(--color-rule-text);
}

.breadcrumb a:hover
{
  color : var(--color-heading);
}

.breadcrumb__sep
{
  margin  : 0 0.5rem;
  opacity : 0.6;
}

.book
{
  display               : grid;
  grid-template-columns : 1fr;
  gap                   : 2.5rem;
  margin-top            : 1rem;
}

.book__cover-col
{
  justify-self : center;
}

.book__header h1
{
  font-size  : var(--step-4);
  margin-top : 0.5rem;
}

.book__lede
{
  font-size  : var(--step-2);
  font-style : italic;
  color      : var(--color-text-muted);
  margin     : 0.5rem 0 1.5rem;
}

.topic-list
{
  list-style            : none;
  margin                : 1rem 0 0;
  padding               : 0;
  display               : grid;
  grid-template-columns : 1fr;
  gap                   : 0.5rem;
}

.topic-list li
{
  background    : var(--color-surface);
  border        : 1px solid var(--color-border);
  border-radius : var(--radius-sm);
  padding       : 0.7rem 0.9rem;
  display       : flex;
  align-items   : flex-start;
  gap           : 0.6rem;
  line-height   : 1.4;
}

.topic-list .topic-list__num
{
  font-family : var(--font-display);
  font-style  : italic;
  font-size   : 0.9rem;
  color       : var(--color-heading);
  padding-top : 0.1rem;
  min-width   : 2ch;
}

.callout
{
  background    : var(--color-surface-alt);
  border        : 1px solid var(--color-rule);
  border-radius : var(--radius);
  padding       : 1.5rem;
  margin-top    : 2rem;
}

.callout h3
{
  margin-top : 0;
}

.callout p
{
  margin-bottom : 0.5rem;
}

.callout p:last-child
{
  margin-bottom : 0;
}

.table-wrapper
{
  overflow-x    : auto;
  margin        : 1.25rem 0 1.5rem;
  border        : 1px solid var(--color-rule);
  border-radius : var(--radius);
  background    : var(--color-surface);
}

.table-wrapper table
{
  width           : 100%;
  border-collapse : collapse;
  font-size       : 0.95rem;
}

.table-wrapper th, .table-wrapper td
{
  padding        : 0.7rem 1rem;
  text-align     : left;
  border-bottom  : 1px solid var(--color-border);
  vertical-align : top;
}

.table-wrapper th
{
  background     : var(--color-surface-alt);
  font-family    : var(--font-display);
  font-weight    : 500;
  color          : var(--color-heading);
  font-size      : 0.9rem;
  letter-spacing : 0.02em;
}

.table-wrapper tbody tr:last-child td
{
  border-bottom : 0;
}

.doc-content
{
  max-width : 72ch;
}

.doc-content h1
{
  font-size  : var(--step-4);
  margin-top : 0;
}

.doc-content h1:not(:first-child)
{
  margin-top : 2.5rem;
}

.doc-content h2
{
  font-size  : var(--step-3);
  margin-top : 2.25rem;
}

.doc-content h3
{
  font-size  : var(--step-2);
  margin-top : 1.75rem;
}

.doc-content p
{
  color : var(--color-text);
}

.doc-content p + ul, .doc-content p + ol
{
  margin-top : -0.25rem;
}

.doc-content ul, .doc-content ol
{
  padding-left : 1.25rem;
}

.doc-content li
{
  margin-bottom : 0.35rem;
}

.doc-content li > p
{
  margin-bottom : 0.35rem;
}

.doc-content code
{
  color : var(--color-accent-strong);
}

.doc-content pre
{
  background    : var(--color-surface-solid);
  border        : 1px solid var(--color-border);
  padding       : 1rem 1.1rem;
  border-radius : var(--radius-sm);
  overflow-x    : auto;
}

.doc-content pre code
{
  background : none;
  padding    : 0;
  color      : var(--color-text);
}

.doc-content hr
{
  border     : 0;
  border-top : 1px solid var(--color-rule);
  margin     : 2.5rem 0;
}

.doc-content ol#markdown-toc
{
  background    : var(--color-surface);
  border        : 1px solid var(--color-border);
  border-radius : var(--radius-sm);
  padding       : 1rem 1.25rem 1rem 2.25rem;
  margin        : 0 0 2rem;
}

.doc-content ol#markdown-toc li
{
  margin-bottom : 0.25rem;
}

.doc-content .text-delta
{
  display        : block;
  font-family    : var(--font-display);
  font-style     : italic;
  font-weight    : 500;
  font-size      : 1.05rem;
  letter-spacing : 0;
  text-transform : none;
  color          : var(--color-heading);
  background     : none;
  padding        : 0;
  border-radius  : 0;
}

.doc-content .text-delta
{
  margin : 0 0 0.4rem;
}

blockquote
{
  margin        : 1.6em 0;
  padding       : 0.8em 0 0.8em 2.2em;
  border-top    : 1px solid var(--color-rule);
  border-bottom : 1px solid var(--color-rule);
  font-style    : italic;
  position      : relative;
}

blockquote::before
{
  content     : "\201C";
  position    : absolute;
  left        : 0;
  top         : 0.35em;
  font-family : var(--font-display);
  font-style  : normal;
  font-weight : 800;
  font-size   : 2.4rem;
  line-height : 1;
  color       : var(--color-heading);
}

blockquote p:last-child
{
  margin-bottom : 0;
}

blockquote cite, blockquote footer
{
  display    : block;
  text-align : right;
  font-style : normal;
  font-size  : 0.88rem;
  color      : var(--color-text-muted);
  margin-top : 0.5em;
}

.cta-banner
{
  display               : grid;
  grid-template-columns : 1fr;
  gap                   : 1.5rem;
  align-items           : center;
  padding               : 2rem;
  background            : var(--color-surface-alt);
  border                : 1px solid var(--color-rule);
  border-radius         : var(--radius);
  color                 : var(--color-text);
  text-decoration       : none;
  transition            : border-color 140ms ease;
  position              : relative;
  overflow              : hidden;
}

.cta-banner:hover
{
  border-color    : var(--color-heading);
  color           : var(--color-text);
  text-decoration : none;
}

.cta-banner__eyebrow
{
  display        : block;
  font-family    : var(--font-display);
  font-style     : italic;
  font-weight    : 500;
  font-size      : 1.05rem;
  letter-spacing : 0;
  text-transform : none;
  color          : var(--color-heading);
  background     : none;
  padding        : 0;
  border-radius  : 0;
}

.cta-banner__eyebrow
{
  margin-bottom : 0.4rem;
}

.cta-banner h2
{
  font-size : var(--step-3);
  margin    : 0;
  padding   : 0;
  border    : 0;
}

.cta-banner p
{
  color     : var(--color-text-muted);
  margin    : 0.5rem 0 0;
  max-width : 52ch;
}

.cta-banner__action
{
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  gap             : 0.6rem;
  padding         : 0.8rem 1.4rem;
  background      : var(--color-primary);
  color           : var(--color-cream);
  font-family     : var(--font-display);
  font-size       : 0.85rem;
  font-weight     : 500;
  letter-spacing  : 0.08em;
  text-transform  : uppercase;
  border-radius   : 2px;
  flex-shrink     : 0;
  transition      : background-color 140ms ease, color 140ms ease;
}

.cta-banner__action svg
{
  width       : 18px;
  height      : 18px;
  flex-shrink : 0;
}

.cta-banner:hover .cta-banner__action
{
  background : var(--color-primary-strong);
  color      : var(--color-gold);
}

.site-footer
{
  border-top : 1px solid var(--color-rule);
  padding    : 0.6rem 0;
  color      : var(--color-rule-text);
  font-style : italic;
  font-size  : 0.82rem;
  background : transparent;
}

.site-footer__inner
{
  display        : flex;
  flex-direction : column;
  gap            : 0.2rem;
}

.site-footer a
{
  color : var(--color-rule-text);
}

.site-footer a:hover
{
  color : var(--color-heading);
}

@media screen and (min-width: 720px)
{

section
{
  padding : 4rem 0;
}

}
@media screen and (min-width: 720px)
{

.card-grid
{
  grid-template-columns : repeat(3, 1fr);
}

.card-grid--2
{
  grid-template-columns : repeat(2, 1fr);
}

}
@media screen and (min-width: 720px)
{

.book
{
  grid-template-columns : 300px minmax(0, 1fr);
  gap                   : 3.5rem;
  align-items           : start;
}

}
@media screen and (min-width: 560px)
{

.topic-list
{
  grid-template-columns : 1fr 1fr;
}

}
@media screen and (min-width: 720px)
{

.cta-banner
{
  padding               : 2.5rem 2.75rem;
  grid-template-columns : minmax(0, 1fr) auto;
  gap                   : 2.5rem;
}

}
@media screen and (min-width: 720px)
{

.site-footer__inner
{
  flex-direction  : row;
  justify-content : space-between;
  align-items     : center;
}

}

/* Generated with Clay, http://fvisser.nl/clay */@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .card__ripple { display: none; }
}