:root {
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --border-size-2: 2px;
  --size-1: .25rem;
  --font-weight-7: 700;
  --font-lineheight-1: 1.25;
  --border-size-1: 1px;
  --font-lineheight-2: 1.375;
  --font-weight-6: 600;
  --indigo-7: #4263eb;
  --purple-7: #ae3ec9;
  --gray-12: #030507;
  --gray-7: #495057;
  --gray-0: #f8f9fa;
  --gray-2: #e9ecef;
  --gray-3: #dee2e6;
  --gray-4: #ced4da;
  --font-system-ui: system-ui, sans-serif;
  --font-lineheight-3: 1.5;
  --font-weight-9: 900;
  --font-size-8: 3.5rem;
  --size-header-1: 20ch;
  --font-size-6: 2.5rem;
  --size-header-2: 25ch;
  --font-size-5: 2rem;
  --font-size-4: 1.5rem;
  --font-size-3: 1.25rem;
  --size-header-3: 35ch;
  --font-size-2: 1.1rem;
  --size-2: .5rem;
  --size-relative-4: 1.25ch;
  --radius-2: 5px;
  --size-content-1: 20ch;
  --size-3: 1rem;
  --size-10: 5rem;
  --font-monospace-code: Dank Mono,Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, Cascadia Code, Menlo, Consolas, DejaVu Sans Mono, monospace;
  --size-8: 3rem;
  --size-content-2: 45ch;
  --size-content-3: 60ch;
  --size-5: 1.5rem;
  --font-size-0: .75rem;
  --size-fluid-5: clamp(4rem, 5vw, 5rem);
  --border-size-3: 5px;
  --size-4: 1.25rem;
  --red-9: #c92a2a;
  --red-2: #ffc9c9;
  --green-9: #2b8a3e;
  --green-1: #d3f9d8;
  --blue-5: #339af0;
  --radius-3: 1rem;
  --shadow-6: 
    0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)),
    0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)),
    0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)),
    0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)),
    0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)),
    0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --font-serif: ui-serif, serif;
  --choco-12: #3d210d;
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --gray-6: #868e96;
  --indigo-3: #91a7ff;
  --purple-3: #e599f7;
  --gray-1: #f1f3f5;
  --gray-9: #212529;
  --gray-8: #343a40;
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --indigo-2: #bac8ff;
  --font-size-1: 1rem;
  --red-6: #fa5252;
  --red-3: #ffa8a8;
  --purple-2: #eebefa;
}
:where(html) {
  color-scheme: light;

  --link: var(--indigo-7);
  --link-visited: var(--purple-7);

  --text-1: var(--gray-12);
  --text-2: var(--gray-7);

  --surface-1: var(--gray-0);
  --surface-2: var(--gray-2);
  --surface-3: var(--gray-3);
  --surface-4: var(--gray-4);

  --scrollthumb-color: var(--gray-7);
}
@media (dynamic-range: high) or (color-gamut: p3) {
    @supports (color: color(display-p3 0 0 0)) {
:where(html) {
      --link: color(display-p3 .1 .39 1);
      --link-visited: color(display-p3 .6 .2 1)
}
    }
  }
:where(html) :where(dialog) {
    background-color: var(--surface-1);
  }
:where(html) :where(button,.btn) {
    --_highlight: var(--_highlight-light);
    --_bg: var(--_bg-light);
    --_ink-shadow: var(--_ink-shadow-light);
  }
:where(html) :where(button,.btn) :where([type="reset"]) {
      --_text: var(--red-6);
      --_border: var(--red-3);
    }
:where(html) :where(button,.btn,input:is([type="button"],[type="submit"],[type="reset"]))[disabled] {
    --_text: var(--gray-6);
  }
:where(html) :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) {
    background-color: var(--surface-2);
  }
@media (prefers-color-scheme: dark) {
  :where(html) {
    color-scheme: dark;

    --link: var(--indigo-3);
    --link-visited: var(--purple-3);

    --text-1: var(--gray-1);
    --text-2: var(--gray-4);

    --surface-1: var(--gray-9);
    --surface-2: var(--gray-8);
    --surface-3: var(--gray-7);
    --surface-4: var(--gray-6);

    --scrollthumb-color: var(--gray-6);
  }
}
:where(html) {
  /* --brand: your-brand-color-here; */
  
  scrollbar-color: var(--scrollthumb-color) transparent;
  accent-color: var(--brand, var(--link));
  caret-color: var(--brand, var(--link));
  color: var(--text-1);
  background-color: var(--surface-1);
}
:where(a[href]) {
  color: var(--brand, var(--link));
}
:where(a[href]):where(:visited) {
    color: var(--link-visited);
  }
:focus-visible { 
  outline-color: var(--brand, var(--link)); 
}
*, ::before, ::after { box-sizing: border-box; }
:where(:not(dialog)) {
  margin: 0;
}
:where(:not(fieldset, progress, meter)) {
  border-width: 0;
  border-style: solid;
  background-origin: border-box;
  background-repeat: no-repeat;
}
:where(html) {
  block-size: 100%;
  font-family: var(--font-system-ui);
  line-height: var(--font-lineheight-3);
  -webkit-text-size-adjust: none;
}
/* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
@media (prefers-reduced-motion: no-preference) {
:where(html) {
    scroll-behavior: smooth
}
  }
@media (prefers-reduced-motion: no-preference) {
  :where(:focus-visible) {
    transition: outline-offset 145ms var(--ease-2);
  }
  :where(:not(:active):focus-visible) {
    transition-duration: .25s;
  }
}
:where(:not(:active):focus-visible) {
  outline-offset: 5px;
}
:where(body) {
  min-block-size: 100%;
}
:where(h1, h2, h3, h4, h5, h6) {
  line-height: var(--font-lineheight-1);
  font-weight: var(--font-weight-9);
  text-wrap: balance;
}
:where(h1) {
  font-size: var(--font-size-8);
  max-inline-size: var(--size-header-1);
}
:where(h2) {
  font-size: var(--font-size-6);
  max-inline-size: var(--size-header-2);
}
:where(h3) { font-size: var(--font-size-5) }
:where(h4) { font-size: var(--font-size-4) }
:where(h5) { font-size: var(--font-size-3) }
:where(h3, h4, h5, h6, dt) {
  max-inline-size: var(--size-header-3);
}
:where(p, ul, ol, dl, h6) {
  font-size: var(--font-size-2);
}
:where(a, u, ins, abbr) {
  text-underline-offset: 1px;
}
@supports (-moz-appearance: none) {
:where(a, u, ins, abbr) {
    text-underline-offset: 2px
}
  }
:where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"],pre)) {
  cursor: pointer;
}
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
:where(a):where([href]) {
    -webkit-text-decoration-color: var(--indigo-2);
            text-decoration-color: var(--indigo-2);
  }
:where(a):where([href]):where(:visited) {
      -webkit-text-decoration-color: var(--purple-2);
              text-decoration-color: var(--purple-2);
    }
:where(a):where(:not(:hover)) {
    text-decoration: inherit;
  }
:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block;
}
:where(img, svg, video) {
  max-inline-size: 100%;
  block-size: auto;
}
:where(input, button, textarea, select),
:where(input[type="file"])::-webkit-file-upload-button {
  font: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: inherit;
}
::-moz-placeholder {
  color: var(--gray-7);
  opacity: .75;
}
:-ms-input-placeholder {
  color: var(--gray-7);
  opacity: .75;
}
::placeholder {
  color: var(--gray-7);
  opacity: .75;
}
:where(input:not([type="range"]), textarea) {
  padding-inline: var(--size-2);
  padding-block: var(--size-1);
}
:where(select) {
  padding-inline: var(--size-relative-4) 0;
  padding-block: .75ch;
  field-sizing: content;
}
:where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) {
  background-color: var(--surface-2);
  border-radius: var(--radius-2);
}
:where(textarea) {
  resize: block;
  field-sizing: content;
  min-inline-size: var(--size-content-1);
  min-block-size: 2lh;
}
:where(input[type="checkbox"], input[type="radio"]) {
  block-size: var(--size-3);
  inline-size: var(--size-3);
}
:where(svg:not([width])) {
  inline-size: var(--size-10);
}
:where(code, kbd, samp, pre) { font-family: var(--font-monospace-code), monospace; }
:where(:not(pre) > code, kbd) { white-space: nowrap }
:where(pre) {
  white-space: pre;
  min-inline-size: 0;
  max-inline-size: -moz-max-content;
  max-inline-size: max-content;
  -ms-writing-mode: lr;
      writing-mode: lr;
  direction: ltr;
}
:where(:not(pre) > code) {
  padding: var(--size-1) var(--size-2);
  background: var(--surface-2);
  border-radius: var(--radius-2);
  -ms-writing-mode: lr;
      writing-mode: lr;
}
:where(kbd, var) {
  padding: var(--size-1) var(--size-2);
  border-width: var(--border-size-1);
  border-color: var(--surface-4);
  border-radius: var(--radius-2);
}
:where(mark) {
  border-radius: var(--radius-2);
  padding-inline: var(--size-1);
}
:where(ol, ul) { padding-inline-start: var(--size-8) }
:where(li) { padding-inline-start: var(--size-2) }
:where(li, dd, figcaption) { max-inline-size: var(--size-content-2) }
:where(p) { max-inline-size: var(--size-content-3); text-wrap: pretty; }
:where(dt, summary) { font-weight: var(--font-weight-7) }
:where(dt:not(:first-of-type)) {
  margin-block-start: var(--size-5);
}
:where(small) {
  font-size: max(.5em, var(--font-size-0));
  max-inline-size: var(--size-content-1);
}
:where(hr) {
  margin-block: var(--size-fluid-5);
  height: var(--border-size-2);
  background-color: var(--surface-3);
}
:where(figure) {
  display: grid;
  gap: var(--size-2);
  place-items: center;
}
:where(figure) > :where(figcaption) {
    font-size: var(--font-size-1);
    text-wrap: balance;
  }
:where(blockquote, :not(blockquote) > cite) {
  border-inline-start-width: var(--border-size-3);
}
:where(blockquote) {
  display: grid;
  gap: var(--size-3);
  padding-block: var(--size-3);
  padding-inline: var(--size-4);
  max-inline-size: var(--size-content-2);
}
:where(:not(blockquote) > cite) {
  padding-inline-start: var(--size-2);
}
:where(summary) {
  background: var(--surface-3);
  padding: var(--size-2) var(--size-3);
  margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
  border-radius: var(--radius-2);
}
:where(details) {
  padding-inline: var(--size-3);
  padding-block: var(--size-2);
  background: var(--surface-2);
  border-radius: var(--radius-2);
}
:where(details[open] > summary) {
  margin-bottom: var(--size-2);
  border-end-start-radius: 0;
  border-end-end-radius: 0;
}
:where(fieldset) {
  border-radius: var(--radius-2);
  border: var(--border-size-1) solid var(--surface-4);
}
:where(del) {
  background: var(--red-9);
  color: var(--red-2);
}
:where(ins) {
  background: var(--green-9);
  color: var(--green-1);
}
:where(abbr) {
  -webkit-text-decoration-color: var(--blue-5);
          text-decoration-color: var(--blue-5);
}
:where(dialog) {
  background-color: var(--surface-1);
  color: inherit;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-6);
}
:where(menu) {
  padding-inline-start: 0;
  display: flex;
  gap: var(--size-3);
}
:where(sup) {
  font-size: .5em;
}
:where(table) {
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid var(--surface-2);
  background: var(--surface-2);
  border-radius: var(--radius-3);

  --nice-inner-radius: calc(var(--radius-3) - 2px);
}
:where(table:not(:has(tfoot)) tr:last-child td:first-child) {
  border-end-start-radius: var(--nice-inner-radius);
}
:where(table:not(:has(tfoot)) tr:last-child td:last-child) {
  border-end-end-radius: var(--nice-inner-radius);
}
:where(table thead tr:first-child th:first-child) {
  border-start-start-radius: var(--nice-inner-radius);
}
:where(table thead tr:first-child th:last-child) {
  border-start-end-radius: var(--nice-inner-radius);
}
:where(tfoot tr:last-child :is(th,td):first-of-type) {
  border-end-start-radius: var(--nice-inner-radius);
}
:where(tfoot tr:last-child :is(th,td):last-of-type) {
  border-end-end-radius: var(--nice-inner-radius);
}
:where(th) {
  color: var(--text-1);
  background-color: var(--surface-2);
}
:where(table :is(a, button, [contenteditable]):is(:focus-visible)) {
  outline-offset: -2px;
}
:where(td) {
  background: var(--surface-1);
  max-inline-size: var(--size-content-2);
  text-wrap: pretty;
}
:where(td,th) {
  text-align: left;
  padding: var(--size-2);
}
:where(:is(td,th):not([align])) {
	text-align: center;
}
:where(thead) {
  border-collapse: collapse;
}
:where(table tr:hover td),
:where(tbody tr:nth-child(even):hover td) {
  background-color: var(--surface-3);
}
:where(table > caption) {
  margin: var(--size-3);
}
:where(tfoot button) {
  padding-block: var(--size-1);
  padding-inline: var(--size-3);
}
@media (prefers-color-scheme: dark) {
  :where(textarea, select, input:not([type="button"],[type="submit"],[type="reset"])) {
    background-color: hsl(210 11% 10%);
  }

  :where(dialog) {
    background-color: var(--surface-2);
  }

  :where(html) {
    --shadow-strength: 10%;
    --shadow-color: 220 40% 2%;
  }

  ::-moz-placeholder {
    color: var(--gray-6);
  }

  :-ms-input-placeholder {
    color: var(--gray-6);
  }

  ::placeholder {
    color: var(--gray-6);
  }
}
:where(h1, h2, h3, h4, h5, h6) {
  font-size: var(--font-size-4);
}
:where(p, ul, ol, dl, h6) {
  font-size: var(--u-font-size-0);
  font-variant-numeric: oldstyle-nums;
  font-weight: 400;
}
:where(:-moz-any-link) {
  text-decoration-color: var(--accent);
}
:where(:any-link) {
  -webkit-text-decoration-color: var(--accent);
          text-decoration-color: var(--accent);
}
:where(:link, input):focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
  }
:where([role='list']) {
  list-style: none;
  padding-left: 0;
}
:where(small) {
  font-size: var(--u-font-size--1);
}
* {
  scroll-padding-block: var(--size-4) var(--size-4);
}
::-moz-selection {
  background-color: var(--text-1);
  color: var(--surface-1);
}
::selection {
  background-color: var(--text-1);
  color: var(--surface-1);
}
// Credit: https://css-tricks.com/aspect-ratio-boxes/

[style*='--aspect-ratio'] > :first-child {
  width: 100%;
}
[style*='--aspect-ratio'] > img {
  height: auto;
}
@supports (--custom: property) and (not (aspect-ratio: 16/9)) {
  [style*='--aspect-ratio'] {
    position: relative;
  }

  [style*='--aspect-ratio']::before {
    content: '';
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }

  [style*='--aspect-ratio'] > :first-child {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
  }
}
@supports (aspect-ratio: 16/9) {
  [style*='--aspect-ratio'] {
    aspect-ratio: var(--aspect-ratio);
  }
}
a[href] {
  text-decoration: underline;
}
a[href]:focus-visible {
    text-decoration: none;
  }
:where(a[href]):visited {
  color: var(--link);
}
li::marker {
  color: var(--accent);
  font-size: smaller;
  font-variant-numeric: oldstyle-nums;
}
:where(picture) {
  display: contents;
}
:where(source) {
  /* as we do not display picture elements, we need to take source elements out of the flow too. without this declaration source will create, e.g., white space in flex layouts */
  display: none;
}
:where(img) {
  display: inline-block;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@font-face {
  font-family: Elford;
  font-style: normal;
  font-weight: normal;
  src: url('https://static.owlish.dev/fonts/elfort-v37.woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Weiß Antiqua';
  font-style: normal;
  font-weight: 400;
  src: url('https://static.owlish.dev/fonts/weiss-antiqua/wa-uwd-regular.woff2')
    format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Weiß Antiqua';
  font-style: italic;
  font-weight: 400;
  src: url('https://static.owlish.dev/fonts/weiss-antiqua/wa-uwd-italic.woff2')
    format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Weiß Antiqua';
  font-style: normal;
  font-weight: 700;
  src: url('https://static.owlish.dev/fonts/weiss-antiqua/wa-uwd-bold.woff2')
    format('woff2');
}
:root {
  --fonts-headline: Elford, cursive;
  --font-serif: Weiß Antiqua, ui-serif, serif;
}
:where(html) {
  font-family: var(--font-serif);
}
:where(.main-headline, .text-page h1) {
  font-family: var(--fonts-headline);
  font-size: var(--u-font-size-6);
  text-wrap: balance;
}
.text-centered {
  margin-inline: auto;
  text-align: center;
}
.text-upper {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  word-spacing: 0.02em;
}
.ornamental-frame {
  --frame-ornament: clamp(2rem, 5vw, 3.5rem);
  --frame-line-inset: calc(var(--frame-ornament) / 2);
  --frame-thickness: 2px;

  /*
   * 4 border lines drawn as 1px-thick solid-color gradients.
   * Each one is positioned and sized to start/end at the ornament boundaries.
   * The linear-gradient(color, color) trick creates a solid rectangle —
   * the size/position in the shorthand controls where it appears.
   *
   * Shorthand: background: <image> <position> / <size> <repeat>
   */
  background:
    /* Top line */ linear-gradient(var(--text-1), var(--text-1))
      var(--frame-ornament) var(--frame-line-inset) /
      calc(100% - 2 * var(--frame-ornament)) var(--frame-thickness) no-repeat,
    /* Bottom line */ linear-gradient(var(--text-1), var(--text-1))
      var(--frame-ornament) calc(100% - var(--frame-line-inset)) /
      calc(100% - 2 * var(--frame-ornament)) var(--frame-thickness) no-repeat,
    /* Left line */ linear-gradient(var(--text-1), var(--text-1))
      var(--frame-line-inset) var(--frame-ornament) / var(--frame-thickness)
      calc(100% - 2 * var(--frame-ornament)) no-repeat,
    /* Right line */ linear-gradient(var(--text-1), var(--text-1))
      calc(100% - var(--frame-line-inset)) var(--frame-ornament) /
      var(--frame-thickness) calc(100% - 2 * var(--frame-ornament)) no-repeat;
  padding: var(--frame-ornament);
  position: relative;
}
/* --- Corner ornaments --- */
/* Shared base for all corners */
.ornamental-frame::before,
.ornamental-frame::after,
.frame-corners::before,
.frame-corners::after {
  background: url('/img/corner-ornament.svg') no-repeat center / contain;
  content: '';
  display: inline-block;
  height: var(--frame-ornament);
  position: absolute;
  width: var(--frame-ornament);
}
/* The span must span the full frame so its pseudo-elements position correctly */
.frame-corners {
  inset: 0;
  pointer-events: none;
  position: absolute;
}
/* Place + flip each corner */
.ornamental-frame::before {
  left: 0;
  top: 0;
}
/* TL: no flip */
.ornamental-frame::after {
  right: 0;
  top: 0;
  transform: scaleX(-1);
}
/* TR: mirror X */
.frame-corners::before {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}
/* BL: mirror Y */
.frame-corners::after {
  bottom: 0;
  right: 0;
  transform: scale(-1);
}
/* BR: mirror both */
.skip-link {
  inset-inline-start: -9999px;
  position: absolute;
  z-index: 999;
}
.skip-link:focus {
    background: var(--surface-1);
    color: var(--text-1);
    inset-block-start: 0;
    inset-inline-start: 0;
    outline: 2px solid var(--link);
    padding: 1em;
  }
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
body > .page-footer {
    margin-block-start: auto;
  }
.logo {
  width: min(50vw, 320px);
}
.base-header {
  align-items: center;
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: var(--size-3);
}
.text-page {
  margin-inline: auto;
  max-inline-size: var(--size-content-3);
}
.text-page :is(p, h2, h3, h4) + :is(p, h2, h3, h4) {
    margin-block-start: 1em;
  }
.end-role {
  place-content: center center;
  background-color: var(--choco-12);
  display: flex;
  margin-block-start: var(--size-3);
  padding-block: var(--size-2);
  padding-inline: var(--size-5);
}
@media (prefers-color-scheme: dark) {
  :root {
    --shadow-color: 220 40% 2%;
    --shadow-strength: 25%;
  }
}