@charset "UTF-8";
@font-face {
  font-family: "IBMPlexMono";
  src: url("/static/fonts/plex/IBMPlexMono-Bold.woff2");
  src: url("/static/fonts/plex/IBMPlexMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexMono";
  src: url("/static/fonts/plex/IBMPlexMono-BoldItalic.woff2");
  src: url("/static/fonts/plex/IBMPlexMono-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexMono";
  src: url("/static/fonts/plex/IBMPlexMono-Regular.woff2");
  src: url("/static/fonts/plex/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexMono";
  src: url("/static/fonts/plex/IBMPlexMono-RegularItalic.woff2");
  src: url("/static/fonts/plex/IBMPlexMono-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexMono";
  src: url("/static/fonts/plex/IBMPlexMono-Light.woff2");
  src: url("/static/fonts/plex/IBMPlexMono-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexMono";
  src: url("/static/fonts/plex/IBMPlexMono-LightItalic.woff2");
  src: url("/static/fonts/plex/IBMPlexMono-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/static/fonts/plex/IBMPlexSans-Bold.woff2");
  src: url("/static/fonts/plex/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/static/fonts/plex/IBMPlexSans-BoldItalic.woff2");
  src: url("/static/fonts/plex/IBMPlexSans-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/static/fonts/plex/IBMPlexSans-Regular.woff2");
  src: url("/static/fonts/plex/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/static/fonts/plex/IBMPlexSans-RegularItalic.woff2");
  src: url("/static/fonts/plex/IBMPlexSans-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/static/fonts/plex/IBMPlexSans-Light.woff2");
  src: url("/static/fonts/plex/IBMPlexSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/static/fonts/plex/IBMPlexSans-LightItalic.woff2");
  src: url("/static/fonts/plex/IBMPlexSans-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSerif";
  src: url("/static/fonts/plex/IBMPlexSerif-Bold.woff2");
  src: url("/static/fonts/plex/IBMPlexSerif-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSerif";
  src: url("/static/fonts/plex/IBMPlexSerif-BoldItalic.woff2");
  src: url("/static/fonts/plex/IBMPlexSerif-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSerif";
  src: url("/static/fonts/plex/IBMPlexSerif-Regular.woff2");
  src: url("/static/fonts/plex/IBMPlexSerif-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSerif";
  src: url("/static/fonts/plex/IBMPlexSerif-RegularItalic.woff2");
  src: url("/static/fonts/plex/IBMPlexSerif-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSerif";
  src: url("/static/fonts/plex/IBMPlexSerif-Light.woff2");
  src: url("/static/fonts/plex/IBMPlexSerif-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSerif";
  src: url("/static/fonts/plex/IBMPlexSerif-LightItalic.woff2");
  src: url("/static/fonts/plex/IBMPlexSerif-LightItalic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
}
/***
    The new CSS reset - version 1.11.3 (last updated 25.08.2024)
    GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
 */
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
  all: unset;
  display: revert;
}

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

/* Fix mobile Safari increase font-size on landscape mode */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Reapply the pointer cursor for anchor tags */
a, button {
  cursor: revert;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu, summary {
  list-style: none;
}

/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
ol {
  counter-reset: revert;
}

/* For images to not be able to exceed their container */
img {
  max-inline-size: 100%;
  max-block-size: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
  -webkit-user-select: auto;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* minimum style to allow to style meter element */
meter {
  -webkit-appearance: revert;
  appearance: revert;
}

/* preformatted text - use only for this feature */
:where(pre) {
  all: revert;
  box-sizing: border-box;
}

/* reset default text opacity of input placeholder */
::placeholder {
  color: unset;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly.
   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
  -webkit-user-select: auto;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

/* Revert Modal native behavior */
:where(dialog:modal) {
  all: revert;
  box-sizing: border-box;
}

/* Remove details summary webkit styles */
::-webkit-details-marker {
  display: none;
}

*:focus, *:focus-visible {
  outline-color: var(--hero);
  outline-style: solid;
  outline-width: 2px;
}

html {
  --huge-width: 1400px;
  --big-wdth: 960px;
  --medium-width: 720px;
  --small-width: 600px;
  --monospace-font-family: IBMPlexMono, monospace;
  --sans-font-family: IBMPlexSans, sans-serif;
  --serif-font-family: IBMPlexSerif, serif;
  --base-font-family: var(--sans-font-family);
  --exciting-font-family: var(--sans-font-family);
  --boring-font-family: var(--monospace-font-family);
  --nav-font-family: var(--monospace-font-family);
  --transition: all 0.2s ease-out;
  --light-weight: 300;
  --regular-weight: 400;
  --bold-weight: 700;
  -webkit-text-size-adjust: 100%;
  font-size: 16.5px;
  font-weight: var(--regular-weight);
  height: 100%;
  --haunted: hsl(120, 0%, 100%);
  --silent: hsl(120, 0%, 98%);
  --loud: hsl(120, 0%, 7%);
  --shouting: hsl(120, 0%, 0%);
  --hero: hsl(120, 100%, 35%);
  --slightly-heroic: hsl(120, 90%, 23%);
  --faintly-heroic: hsl(120, 70%, 90%);
  --danger: hsl(340, 100%, 40%);
  --cool: hsl(220, 100%, 35%);
  --weird: hsl(290, 100%, 35%);
  --slightly-cool: hsl(220, 100%, 20%);
  --slightly-weird: hsl(290, 100%, 10%);
  --faintly-cool: hsl(220, 100%, 70%);
  --faintly-weird: hsl(290, 100%, 90%);
  --hushed: hsl(120, 0%, 42%);
  --whisper: hsl(120, 0%, 70%);
  --quiet: hsl(120, 0%, 90%);
}
@media (min-width: 600px) {
  html {
    font-size: 17.5px;
  }
}

@media (prefers-color-scheme: dark) {
  html {
    --haunted: hsl(120, 0%, 0%);
    --silent: hsl(120, 0%, 7%);
    --loud: hsl(120, 0%, 98%);
    --shouting: hsl(120, 0%, 100%);
    --hero: hsl(120, 100%, 57%);
    --slightly-heroic: hsl(120, 35%, 75%);
    --faintly-heroic: hsl(120, 100%, 15%);
    --danger: hsl(340, 100%, 40%);
    --cool: hsl(220, 90%, 75%);
    --weird: hsl(290, 100%, 35%);
    --slightly-cool: hsl(220, 90%, 85%);
    --slightly-weird: hsl(290, 100%, 93%);
    --faintly-cool: hsl(220, 90%, 30%);
    --faintly-weird: hsl(290, 100%, 10%);
    --hushed: hsl(120, 0%, 70%);
    --whisper: hsl(120, 0%, 32%);
    --quiet: hsl(120, 0%, 15%);
  }
}
section, aside, div, article, footer, header, nav, address {
  display: block;
}

body {
  background-color: var(--silent);
  color: var(--loud);
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  height: 100%;
  font-family: var(--base-font-family);
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--bold-weight);
}
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
  font-size: inherit;
}

h1, h2, h3 {
  font-family: var(--exciting-font-family);
  line-height: 1.125;
}
h1 small, h2 small, h3 small {
  font-weight: var(--light-weight);
}

h1 {
  font-size: 2.25rem;
  margin-block-end: 1rem;
  margin-block-start: 1rem;
}
h1 small {
  color: var(--hushed);
}

h2 {
  border-block-start: 1px dashed var(--whisper);
  font-size: 1.75rem;
  margin-block-end: 2rem;
  margin-block-start: 2rem;
  padding-block-start: 0.5rem;
}

h3 {
  font-size: 1.25rem;
  margin-block-end: 1rem;
  margin-block-start: 2rem;
}

h4, h5, h6 {
  font-family: var(--exciting-font-family);
  margin-block-end: 0.5rem;
  margin-block-start: 0.5rem;
}
h4 small, h5 small, h6 small {
  font-weight: var(--regular-weight);
}

h4 {
  font-size: 1.125rem;
}

h5 {
  color: var(--hushed);
}

h6 {
  color: var(--whisper);
  font-size: 0.9rem;
  font-weight: var(--regular-weight);
}

hgroup {
  margin-block-end: 2rem;
}

p {
  margin-block-end: 1rem;
}

blockquote {
  background-color: var(--haunted);
  border-color: var(--quiet);
  border-style: solid;
  border-width: 1px;
  color: var(--hushed);
  font-family: var(--boring-font-family);
  font-size: 85%;
  font-style: italic;
  margin-block-end: 2rem;
  margin-block-start: 2rem;
  padding: 1rem;
}
blockquote p:last-child {
  margin-block-end: 0;
}

hr {
  border-color: var(--whisper);
  border-style: dashed;
  border-width: 0 0 1px 0;
  margin-block-end: 1.5rem;
  margin-block-start: 1.5rem;
  padding: 0;
}

a:link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.125em;
}
a:visited {
  color: inherit;
}
a:hover {
  background-color: var(--hero);
  color: var(--silent);
  transition: all 0.2s ease-out;
  text-decoration-color: var(--hero);
}
h1 a:link, h1 a:visited, h2 a:link, h2 a:visited, h3 a:link, h3 a:visited, h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited {
  color: inherit;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
  color: var(--silent);
}

a.button {
  background-color: var(--loud) !important;
  border: none;
  color: var(--silent) !important;
  display: inline-block;
  font-family: var(--nav-font-family);
  font-weight: var(--bold-weight);
  padding: 0.5rem 1rem;
  text-decoration: none;
}
a.button:hover {
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

a.hot-button {
  background-color: var(--hero) !important;
  border: none;
  color: var(--silent) !important;
  display: inline-block;
  font-family: var(--nav-font-family);
  font-weight: var(--bold-weight);
  padding: 0.5rem 1rem;
  text-decoration: none;
}
a.hot-button:hover {
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

a.cool-button {
  background-color: var(--hushed) !important;
  border: none;
  color: var(--silent) !important;
  display: inline-block;
  font-family: var(--nav-font-family);
  font-weight: var(--bold-weight);
  padding: 0.5rem 1rem;
  text-decoration: none;
}
a.cool-button:hover {
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

a.danger-button {
  background-color: var(--danger) !important;
  border: none;
  color: var(--silent) !important;
  display: inline-block;
  font-family: var(--nav-font-family);
  font-weight: var(--bold-weight);
  padding: 0.5rem 1rem;
  text-decoration: none;
}
a.danger-button:hover {
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

strong, b, dfn, var {
  font-weight: var(--bold-weight);
}

em, i, cite, q {
  font-style: italic;
}

u, ins {
  text-decoration: underline;
}

del, s {
  text-decoration: line-through;
}

small, sup, sub {
  font-size: 80%;
}

big {
  font-size: 1.4rem;
}

sup {
  vertical-align: super;
}

sub {
  vertical-align: sub;
}

kbd, code, samp {
  color: var(--weird);
  font-family: var(--monospace-font-family);
}

mark {
  background: var(--faintly-weird);
}

ul, ol {
  margin-block-end: 1rem;
  margin-inline-start: 2rem;
}
ul ul, ul ol, ol ul, ol ol {
  margin-block-end: 0;
}

ul {
  list-style-type: disc;
}

ol {
  counter-reset: revert;
  list-style-type: decimal;
}

dl {
  margin-block-end: 1rem;
}

dt {
  font-weight: var(--bold-weight);
  margin-block-start: 2rem;
  margin-block-end: 0.5rem;
}

dd {
  margin-block-end: 1rem;
  margin-inline-start: 1rem;
}

table {
  border: 1px solid var(--hushed);
  margin-block-end: 2rem;
  margin-block-start: 2rem;
}

tr:not(:last-child) {
  border-block-end: 1px solid var(--whisper);
}

td, th {
  padding: 0.5rem;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: var(--bold-weight);
}

thead {
  background-color: var(--quiet);
  border-block-end: 1px solid var(--hushed);
}

tfoot {
  background-color: var(--quiet);
  border-block-start: 1px solid var(--hushed);
}

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

.responsive-image {
  display: block;
  margin-inline-end: auto;
  margin-inline-start: auto;
  max-width: 100%;
}

form ul {
  list-style-type: none;
  margin: 0;
}

fieldset {
  background-color: var(--quiet);
  border: 1px solid var(--whisper);
  display: block;
  margin-block-end: 2rem;
  margin-block-start: 2rem;
  padding: 0.5rem;
}

legend {
  font-weight: var(--bold-weight);
  margin-inline-start: 1rem;
  padding: 0 0.5rem;
}

label {
  display: block;
  font-weight: var(--bold-weight);
}

.field-container {
  margin-block-end: 0.5rem;
}

input, textarea, select {
  background: hsl(120, 0%, 100%);
  border: 1px solid var(--hushed);
}

input, textarea, select, option {
  background-color: var(--silent);
  border-radius: 0;
  box-shadow: 0 0 0;
  box-sizing: border-box;
  color: var(--loud);
  font-family: var(--boring-font-family);
  font-size: 1rem;
  padding: 1rem;
}

select, option {
  padding: 0.5rem;
}

select {
  appearance: none;
  background-color: var(--silent);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
  background-origin: content-box;
  background-position: center right -1.5rem;
  background-repeat: no-repeat;
  background-size: 0.75rem 0.5rem;
  padding-inline-end: 2rem;
}

input[type=text],
input[type=password],
input[type=url],
input[type=email],
input[type=search],
input[type=number],
input[type=color],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=datetime],
input[type=datetime-local] {
  border-color: var(--hushed);
  border-radius: 0;
  border-width: 1px;
  color: var(--loud);
  padding: 0.3333rem;
}
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=url]::placeholder,
input[type=email]::placeholder,
input[type=search]::placeholder,
input[type=number]::placeholder,
input[type=color]::placeholder,
input[type=range]::placeholder,
input[type=date]::placeholder,
input[type=month]::placeholder,
input[type=week]::placeholder,
input[type=datetime]::placeholder,
input[type=datetime-local]::placeholder {
  color: var(--hushed);
}

input[type=color] {
  height: 2rem;
  padding: 0;
  width: 2rem;
}

input[type=submit], input[type=button], input[type=reset], button {
  font-family: var(--nav-font-family);
  font-size: 1rem;
  margin: 0;
  background-color: var(--hushed) !important;
  border: none;
  color: var(--silent) !important;
  display: inline-block;
  font-family: var(--nav-font-family);
  font-weight: var(--bold-weight);
  padding: 0.5rem 1rem;
  text-decoration: none;
}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, button:hover {
  opacity: 0.8;
  cursor: pointer;
  transition: all 0.2s ease-out;
}

input[type=submit] {
  background-color: var(--loud);
}

input[type=reset] {
  background-color: var(--whisper);
}

input[type=checkbox],
input[type=radio] {
  padding: 0.5rem;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
  background: var(--loud);
  border-color: var(--loud);
  box-shadow: inset 0 0 0 2px var(--silent);
}

input[type=radio] {
  border-radius: 100%;
}

*[title=Required], .required {
  color: var(--danger);
}

.is-error {
  border: 2px solid var(--danger) !important;
}
.is-error::placeholder {
  color: var(--danger);
}

label.error {
  color: var(--danger);
}

.is-valid {
  border: 2px solid var(--weird) !important;
}
.is-valid::placeholder {
  color: var(--weird);
}

label.valid {
  color: var(--weird);
}

.options label {
  font-weight: var(--regular-weight);
}

.bg-haunted {
  background: var(--haunted);
}

.fg-haunted {
  color: var(--haunted);
}

.bg-silent {
  background: var(--silent);
}

.fg-silent {
  color: var(--silent);
}

.bg-loud {
  background: var(--loud);
}

.fg-loud {
  color: var(--loud);
}

.bg-shouting {
  background: var(--shouting);
}

.fg-shouting {
  color: var(--shouting);
}

.bg-hero {
  background: var(--hero);
}

.fg-hero {
  color: var(--hero);
}

.bg-slightly-heroic {
  background: var(--slightly-heroic);
}

.fg-slightly-heroic {
  color: var(--slightly-heroic);
}

.bg-faintly-heroic {
  background: var(--faintly-heroic);
}

.fg-faintly-heroic {
  color: var(--faintly-heroic);
}

.bg-danger {
  background: var(--danger);
}

.fg-danger {
  color: var(--danger);
}

.bg-cool {
  background: var(--cool);
}

.fg-cool {
  color: var(--cool);
}

.bg-weird {
  background: var(--weird);
}

.fg-weird {
  color: var(--weird);
}

.bg-slightly-cool {
  background: var(--slightly-cool);
}

.fg-slightly-cool {
  color: var(--slightly-cool);
}

.bg-slightly-weird {
  background: var(--slightly-weird);
}

.fg-slightly-weird {
  color: var(--slightly-weird);
}

.bg-faintly-cool {
  background: var(--faintly-cool);
}

.fg-faintly-cool {
  color: var(--faintly-cool);
}

.bg-faintly-weird {
  background: var(--faintly-weird);
}

.fg-faintly-weird {
  color: var(--faintly-weird);
}

.bg-hushed {
  background: var(--hushed);
}

.fg-hushed {
  color: var(--hushed);
}

.bg-whisper {
  background: var(--whisper);
}

.fg-whisper {
  color: var(--whisper);
}

.bg-quiet {
  background: var(--quiet);
}

.fg-quiet {
  color: var(--quiet);
}

.styleguide-color {
  background-color: var(--black);
  color: var(--white);
  margin-block-end: 0.125rem;
  padding: 0.25rem;
  width: 50%;
}

.unlist {
  list-style-type: none;
  margin-inline-start: 0;
}

.inline-list {
  list-style-type: none;
  margin-inline-start: 0;
}
.inline-list li {
  display: inline;
}
.inline-list li:after {
  content: ", ";
}
.inline-list li:last-child:after {
  content: "";
}

.hanging-list {
  list-style-type: none;
  margin-inline-start: 0;
}
.hanging-list li {
  align-items: baseline;
  display: flex;
}
.hanging-list .hanging {
  margin-inline-end: 0.25rem;
  white-space: nowrap;
}

.link-list li {
  margin-block-end: 0.25rem;
}

.borderless tr, .borderless td, .borderless th, .borderless {
  border: none;
}

.total {
  background: var(--quiet);
}

.subhead {
  background: var(--hushed);
  color: var(--silent);
}

.sub-subhead {
  background: var(--quiet);
  border-block-end-color: var(--silent);
}

.colgroup-leader {
  border-inline-start: 1px solid var(--whisper);
}

.data {
  font-family: var(--monospace-font-family);
  text-align: end;
}

.sub {
  /* ?? */
}

.inline-field-container {
  margin-block-end: 1rem;
  align-items: center;
  display: flex;
  flex-direction: row;
}
.inline-field-container label, .inline-field-container input, .inline-field-container select {
  margin-inline-end: 0.5rem;
}

.the-page, .site-header, .site-footer {
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: var(--medium-width);
  width: calc(100% - 2rem);
}

.breadcrumb {
  color: var(--hushed);
  padding-block-end: 1rem;
  padding-block-start: 1rem;
  margin-inline-start: 1rem;
}
@media (min-width: calc(720px + 2rem)) {
  .breadcrumb {
    margin-inline-start: 0;
  }
}

.the-page {
  flex-grow: 1;
}

.site-footer {
  border-block-start: 1px dashed var(--whisper);
  margin-block-start: 4rem;
}

.legalese {
  color: var(--whisper);
  margin-block-start: 3rem;
  margin-block-end: 1rem;
}

nav {
  font-family: var(--nav-font-family);
}
nav a:link, nav a:visited {
  background-color: transparent;
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}
nav a:hover {
  background-color: var(--hero);
  color: var(--silent);
  transition: var(--transition);
}

.footer-nav {
  color: var(--hushed);
  padding-block-start: 2rem;
  margin-inline-start: 1rem;
}
@media (min-width: calc(720px + 2rem)) {
  .footer-nav {
    margin-inline-start: 0;
  }
}
.footer-nav ul {
  list-style-type: none;
  margin-inline-start: 0;
  margin-inline-end: 0;
}
.footer-nav li {
  margin-block-end: 0;
}

.home-link {
  color: var(--loud) !important;
  display: inline-block;
}
.home-link:hover {
  color: var(--silent) !important;
}

.inline-nav ul {
  list-style-type: none;
  margin-inline-start: 0;
}
.inline-nav li {
  display: inline-block;
}

a.cta:link, a.cta:visited, a.cta {
  background-color: var(--quiet);
  display: inline-block;
  padding: 0 0.25rem;
}
a.cta:link:after, a.cta:visited:after, a.cta:after {
  content: " →";
}
a.cta:link:hover, a.cta:visited:hover, a.cta:hover {
  background-color: var(--hero);
}

a[href="#toc"] {
  font-style: italic;
}
a[href="#toc"]:after {
  content: " ↑";
}

.label {
  color: var(--hushed);
  font-style: italic;
  text-align: start;
}

.figure {
  text-align: center;
}
.figure img {
  border: 1px solid var(--whisper);
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.site-title {
  font-family: var(--monospace-font-family);
  margin-inline-start: 1.5em;
}
@media (min-width: 600px) {
  .site-title {
    margin-block-start: 2rem;
  }
}
@media (min-width: calc(720px + 6rem)) {
  .site-title {
    margin-inline-start: 0;
  }
}
.site-subtitle {
  margin-block-start: 0;
}

.selfie {
  background-color: var(--haunted);
  border: 1px solid var(--quiet);
  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
  float: right;
  height: 100px;
  margin: 0 0 1rem 1rem;
  width: 100px;
}
@media (min-width: 600px) {
  .selfie {
    height: 200px;
    padding: 1rem 1rem 1rem 1rem;
    width: 200px;
  }
}

.blog-header {
  border-block-end: 1px dashed var(--whisper);
  margin-block-end: 2rem;
  padding-block-end: 1rem;
}

.blog-hero,
.gallery {
  margin-inline-start: -1rem;
  margin-inline-end: -1rem;
}
@media (min-width: 960px) {
  .blog-hero,
  .gallery {
    margin-inline-start: -120px;
    margin-inline-end: -120px;
  }
}
.blog-hero img,
.gallery img {
  margin-inline-start: auto;
  margin-inline-end: auto;
}
.blog-hero a img:hover,
.gallery a img:hover {
  cursor: zoom-in;
}

@media (min-width: 960px) {
  .blog-year {
    display: grid;
    grid-template-columns: 3rem auto;
    grid-auto-rows: auto;
    margin-left: -3rem;
  }
}

@media (min-width: 960px) {
  .blog-grouper {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 3;
    grid-template-columns: subgrid;
  }
  .blog-grouper-head {
    display: grid;
    grid-template-columns: subgrid;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .blog-grouper-head h6 {
    font-family: var(--nav-font-family);
    margin: 0;
  }
  .blog-grouper-body {
    display: grid;
    grid-template-columns: subgrid;
    grid-column-start: 2;
    grid-column-end: 3;
  }
}

.blog-capsule {
  margin-block-end: 1rem;
}
.blog-capsule-link {
  color: inherit !important;
  display: flex;
  text-decoration: none !important;
}
.blog-capsule-link:hover {
  background-color: var(--haunted);
  outline: 0.5rem solid var(--haunted);
  transition: background-color 0.2s ease-out;
}
.blog-capsule h6, .blog-capsule h4 {
  margin-block-start: 0;
}
.blog-capsule p {
  margin-block-end: 0;
}

.blog-thumbnail {
  flex: 0 0 auto;
  margin-inline-end: 1rem;
}

.blog-related {
  margin-block-start: 2rem;
}

.admin-panel {
  color: var(--danger);
  border: 1px solid;
  margin-block-end: 1rem;
  margin-block-start: 1rem;
  padding: 1rem;
}

.pager {
  background-color: var(--haunted);
  border: 1px solid var(--quiet);
  color: var(--hushed);
  margin-block-start: 2rem;
  padding: 1rem;
}
.pager ul {
  align-items: center;
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 0;
}
.pager li {
  margin-block-end: 0;
}

.pager-previous a:link, .pager-previous a:visited, .pager-next a:link, .pager-next a:visited, .pager-index a:link, .pager-index a:visited {
  padding: 0.25rem;
  transition: var(--transition);
}
.pager-previous a:hover, .pager-next a:hover, .pager-index a:hover {
  transition: var(--transition);
}
.pager-previous .no-cta, .pager-next .no-cta, .pager-index .no-cta {
  padding: 0.25rem;
}

.pager-previous a:before {
  content: "← ";
}

.pager-next a:after {
  content: " →";
}

.twitter-tweet,
.mastodon-toot {
  border-color: var(--weird);
  color: var(--hushed);
  margin-block-start: 1.5rem;
  position: relative;
}
.twitter-tweet:before,
.mastodon-toot:before {
  content: "🤮";
  display: block;
  font-size: 2rem;
  top: -1.5rem;
  position: absolute;
}

.twitter-tweet-rendered:before {
  content: none;
}

.a8 {
  background-image: url("data:image/svg+xml;utf8,<svg width='54px' height='54px' viewBox='0 0 54 54' version='1.1' xmlns='http://www.w3.org/2000/svg'><g id='a-8' fill='rgb(0, 178.5, 0)'><rect id='r-4' x='25' y='0' width='4' height='54'></rect><rect id='r-3' transform='translate(27.000000, 27.000000) rotate(-270.000000) translate(-27.000000, -27.000000) ' x='25' y='0' width='4' height='54'></rect><rect id='r-2' transform='translate(27.000000, 27.000000) rotate(-315.000000) translate(-27.000000, -27.000000) ' x='25' y='0' width='4' height='54'></rect><rect id='r-1' transform='translate(27.000000, 27.000000) rotate(-225.000000) translate(-27.000000, -27.000000) ' x='25' y='0' width='4' height='54'></rect></g></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
  display: inline-block;
  flex: 0 0 auto;
  line-height: 1;
  margin-inline-start: -1.25em;
  margin-inline-end: 0.25em;
  width: 1em;
}
@media (prefers-color-scheme: dark) {
  .a8 {
    background-image: url("data:image/svg+xml;utf8,<svg width='54px' height='54px' viewBox='0 0 54 54' version='1.1' xmlns='http://www.w3.org/2000/svg'><g id='a-8' fill='rgb(35.7, 255, 35.7)'><rect id='r-4' x='25' y='0' width='4' height='54'></rect><rect id='r-3' transform='translate(27.000000, 27.000000) rotate(-270.000000) translate(-27.000000, -27.000000) ' x='25' y='0' width='4' height='54'></rect><rect id='r-2' transform='translate(27.000000, 27.000000) rotate(-315.000000) translate(-27.000000, -27.000000) ' x='25' y='0' width='4' height='54'></rect><rect id='r-1' transform='translate(27.000000, 27.000000) rotate(-225.000000) translate(-27.000000, -27.000000) ' x='25' y='0' width='4' height='54'></rect></g></svg>");
  }
}

.danger {
  color: var(--danger);
}

.fg {
  color: var(--loud);
}

.base-font {
  font-family: var(--base-font-family);
}

.exciting-font {
  font-family: var(--exciting-font-family);
}

.nav-font {
  font-family: var(--nav-font-family);
}

.sans {
  font-family: var(--sans-font-family);
}

.mono {
  font-family: var(--monospace-font-family);
}

.serif {
  font-family: var(--serif-font-family);
}

.long-word {
  line-break: anywhere;
}

.fave {
  color: var(--hero);
  display: inline-block;
  font-family: var(--monospace-font-family);
  padding-inline-end: 0.25em;
  padding-inline-start: 0.25em;
}
a:hover .fave {
  color: var(--silent);
}

.align-center {
  text-align: center;
}

.align-left {
  text-align: left;
}

.align-right {
  text-align: right;
}

.blank-image {
  background-color: var(--quiet);
}

.caption {
  color: var(--hushed);
  margin-block-start: 0.5rem;
}

.gallery {
  margin-block-start: 2rem;
  padding-block-start: 1rem;
}

.gallery-item {
  margin-block-end: 1rem;
  margin-block-start: 1rem;
}
.gallery-item a img:hover {
  cursor: zoom-in;
}

.inline {
  display: inline;
}

.inline-block {
  display: inline-block;
}

.float-left {
  float: inline-start;
  margin-block-end: 1rem;
  margin-inline-end: 1rem;
}

.float-right {
  float: inline-end;
  margin-block-end: 1rem;
  margin-inline-start: 1rem;
}

.max-width {
  height: auto;
  margin-inline-start: auto;
  margin-inline-end: auto;
  max-width: 100%;
}

.nomargin {
  margin: 0;
}

.nowrap {
  white-space: nowrap;
}

.inline-block {
  display: inline-block;
}

.overlay {
  display: inline-block;
  position: relative;
}

.hero-overlay {
  background-color: var(--hero);
  inset-block-start: 0;
  inset-inline-start: 0;
  mix-blend-mode: overlay;
  opacity: 60%;
  position: absolute;
  width: 100%;
  height: 100%;
}

@media (min-width: 600px) {
  .timeline {
    display: table;
  }
}

@media (min-width: 600px) {
  .timeline-event {
    display: table-row;
  }
}

.event-date {
  color: var(--hushed);
  font-family: var(--monospace-font-family);
  font-size: 0.9rem;
}
@media (min-width: 600px) {
  .event-date {
    display: table-cell;
    padding-inline-end: 1rem;
    padding-inline-start: 1rem;
    text-align: end;
    white-space: nowrap;
  }
}

@media (min-width: 600px) {
  .event-description {
    display: table-cell;
  }
}

@media print {
  html {
    font-size: 13px;
  }
  .break-before {
    break-before: always;
    page-break-before: always;
  }
}
@page {
  margin: 40%;
}
.resume {
  font-family: var(--sans-font-family);
}
@media print {
  .resume {
    background-color: white;
    font-size: 10px;
    margin: 10mm;
  }
}
.resume h1, .resume h2, .resume h3 {
  font-weight: var(--regular-weight);
  line-height: 1.1;
  text-transform: none;
}
.resume h1 {
  color: var(--hero);
  font-size: 1.5rem;
}
.resume h2 {
  color: var(--hero);
  font-size: 1.5rem;
  margin-block-end: 1.25rem;
  margin-block-start: 1rem;
}
.resume h3 {
  font-size: 1.25rem;
  margin: 1rem 0 0.5rem 0;
}
.resume h4 {
  font-family: var(--sans-font-family);
}
.resume a {
  background-color: transparent;
  color: var(--loud);
  text-decoration: underline;
}
.resume a:hover {
  background: transparent;
  color: var(--hero);
}
.resume .timeline-event, .resume p {
  break-inside: avoid-page;
}
.resume .force-break {
  break-before: page;
}

@media (min-width: 600px) {
  .resume-head {
    display: flex;
  }
}

.resume-intro {
  flex-basis: 1;
  flex-grow: 0;
  flex-shrink: 1;
  font-size: 125%;
}

.resume-links {
  flex-basis: 1;
  flex-grow: 1;
  flex-shrink: 0;
}
@media (min-width: 600px) {
  .resume-links {
    margin-inline-start: 1rem;
  }
}

.resume-cl-head {
  display: flex;
  margin-bottom: 2rem;
}

.cl-me {
  flex-basis: 1;
  flex-grow: 0;
  flex-shrink: 1;
}

.cl-them {
  flex-basis: 1;
  flex-grow: 1;
  flex-shrink: 0;
}

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