@layer base {
  @font-face {
    font-family: "Petrona";
    font-weight: 800;
    font-display: swap;
    /* font-style: oblique 0deg 10deg; */
    src: url("/assets/fonts/petrona/Petrona-800-LatinBasic.woff2")
      format("woff2");
    unicode-range: U+0020-007E, U+00A0-00FF;
  }

  @font-face {
    font-family: "Petrona";
    font-weight: 800;
    font-display: swap;
    /* font-style: oblique 0deg 10deg; */
    src: url("/assets/fonts/petrona/Petrona-800-LatinExt.woff2") format("woff2");
    unicode-range: U+0100-0131, U+0134-017E;
  }

  @font-face {
    font-family: "Fira Code Custom";
    font-weight: 400 800;
    font-display: swap;
    /* font-style: oblique 0deg 10deg; */
    src: url("/assets/fonts/fira-code/FiraCode-Variable-LatinBasic.woff2")
      format("woff2");
    unicode-range: U+0020-007E, U+00A0-00FF;
  }

  @font-face {
    font-family: "Fira Code Custom";
    font-weight: 400 800;
    font-display: swap;
    /* font-style: oblique 0deg 10deg; */
    src: url("/assets/fonts/fira-code/FiraCode-Variable-LatinExt.woff2")
      format("woff2");
    unicode-range: U+0100-0131, U+0134-017E;
  }

  @font-face {
    font-family: "Adjusted Courier New Fallback";
    src: local(Courier New);
    size-adjust: 114%;
    ascent-override: normal;
    descent-override: normal;
    line-gap-override: 19%;
  }

  @font-face {
    font-family: "Adjusted Georgia Fallback";
    src: local(Georgia);
    size-adjust: 97%;
    ascent-override: normal;
    descent-override: normal;
    line-gap-override: 2%;
  }

  :root {
    --white: #fff;
    --black: #000;
    --bg: var(--white);
    --fg: var(--black);
    --primary: rgb(253, 100, 66);
    --font-body: "Fira Code Custom", "Adjusted Courier New Fallback", monospace;
    --font-heading: "Petrona", "Adjusted Georgia Fallback", serif;
    --font-heading-weight: 800;
    /* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --text-size--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
    --text-size--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
    --text-size-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
    --text-size-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
    --text-size-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
    --text-size-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
    --text-size-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
    --text-size-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);

    /* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,24,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    /* Space 3xs: 5px → 6px */
    --space-3xs: clamp(0.3125rem, 0.2908rem + 0.1087vi, 0.375rem);
    /* Space 2xs: 9px → 12px */
    --space-2xs: clamp(0.5625rem, 0.4973rem + 0.3261vi, 0.75rem);
    /* Space xs: 14px → 18px */
    --space-xs: clamp(0.875rem, 0.788rem + 0.4348vi, 1.125rem);
    /* Space s: 18px → 24px */
    --space-s: clamp(1.125rem, 0.9946rem + 0.6522vi, 1.5rem);
    /* Space m: 27px → 36px */
    --space-m: clamp(1.6875rem, 1.4918rem + 0.9783vi, 2.25rem);
    /* Space l: 36px → 48px */
    --space-l: clamp(2.25rem, 1.9891rem + 1.3043vi, 3rem);
    /* Space xl: 54px → 72px */
    --space-xl: clamp(3.375rem, 2.9837rem + 1.9565vi, 4.5rem);
    /* Space 2xl: 72px → 96px */
    --space-2xl: clamp(4.5rem, 3.9783rem + 2.6087vi, 6rem);
    /* Space 3xl: 108px → 144px */
    --space-3xl: clamp(6.75rem, 5.9674rem + 3.913vi, 9rem);

    /* One-up pairs */
    --space-3xs-2xs: clamp(0.3125rem, 0.1603rem + 0.7609vi, 0.75rem);
    --space-2xs-xs: clamp(0.5625rem, 0.3668rem + 0.9783vi, 1.125rem);
    --space-xs-s: clamp(0.875rem, 0.6576rem + 1.087vi, 1.5rem);
    --space-s-m: clamp(1.125rem, 0.7337rem + 1.9565vi, 2.25rem);
    --space-m-l: clamp(1.6875rem, 1.231rem + 2.2826vi, 3rem);
    --space-l-xl: clamp(2.25rem, 1.4674rem + 3.913vi, 4.5rem);
    --space-xl-2xl: clamp(3.375rem, 2.462rem + 4.5652vi, 6rem);
    --space-2xl-3xl: clamp(4.5rem, 2.9348rem + 7.8261vi, 9rem);

    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.4728rem + 3.2609vi, 3rem);
    --space-m-xl: clamp(1.6875rem, 0.7092rem + 4.8913vi, 4.5rem);

    --max-width: 60ch;
  }

  body {
    font-family: var(--font-body);
    color: var(--fg);
    background: var(--bg);
    font-size: var(--text-size-0);
    font-weight: 400;
    line-height: 1.6;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: 1.3;
    margin-block-start: 0;
  }

  h1 {
    font-size: var(--text-size-5);
  }

  h2 {
    font-size: var(--text-size-3);
  }

  h3 {
    font-size: var(--text-size-2);
  }

  ul,
  ol {
    padding-inline-start: 1em;
  }

  ul ::marker {
    color: var(--primary);
  }

  table {
    border-collapse: collapse;
    font-size: var(--text-size-0);
    width: 100%;
  }

  th {
    border-bottom: 1px solid var(--primary);
  }

  td,
  th {
    padding-top: var(--space-3xs);
    padding-bottom: var(--space-3xs);
  }

  td + td,
  th + th {
    padding-left: var(--space-s);
  }

  blockquote {
    padding-inline-start: 1em;
    border-inline-start: 0.3em solid;
    font-size: var(--text-size-1);
    font-variation-settings:
      "CASL" 1,
      "slnt" -9;
    font-weight: 500;
  }

  a {
    color: currentColor;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 0.25ex;
    text-underline-offset: 0.3ex;
  }

  a:focus {
    background: var(--focus-bg, var(--fg));
    outline: 3px solid var(--focus-border, var(--fg));
    outline-offset: 0;
    color: var(--focus-fg, var(--bg));
    text-decoration: none;
  }

  a:hover {
    background: linear-gradient(
      0deg,
      transparent 0,
      var(--primary) 0,
      var(--primary) 25%,
      transparent 25%
    );
  }

  a:focus:hover {
    background: linear-gradient(
      0deg,
      var(--fg) 0,
      var(--primary) 0,
      var(--primary) 25%,
      var(--fg) 25%
    );
  }

  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }

  :is(h1, h2, h3, blockquote) {
    --flow-space: 1.5em;
  }

  main {
    /* max-width: 65ch; */
    margin-inline-start: auto;
    margin-inline-end: auto;
  }

  header {
    display: block;
  }

  blockquote {
    max-width: 50ch;
    font-size: var(--text-size-0);
    font-style: italic;
  }

  figure {
    margin-inline: 0;
    margin-block: 0;
  }

  h1 {
    max-width: 20ch;
  }

  :is(h1, h2, h3, h4).line {
    --gradient-offset: 0.27em;
    background: linear-gradient(
      0deg,
      transparent var(--gradient-offset),
      var(--fg) var(--gradient-offset),
      var(--fg) calc(var(--gradient-offset) + 2px),
      transparent calc(var(--gradient-offset) + 2px)
    );
    line-height: 1.1;
    padding-inline-end: 0.2ch;
    position: relative;
  }

  /* linear-gradient(0deg, transparent 0.7em, rgb(255 255 255 / 1) 0.7em, rgb(255 255 255 / 1) calc(0.7em + 2px), transparent calc(0.7em + 2px)) */

  :is(h1, h2, h3, h4).line span {
    background: var(--bg);
    padding-inline-end: 0.2ch;
  }

  h2,
  h3 {
    max-width: 44ch;
  }

  th {
    text-align: left;
  }

  pre,
  code {
    font-variation-settings: "MONO" 1;
    /*
  ss01: single story a
  ss02: single story g
  ss07: no-serif L and Z
  ss08: simplified @
  ss10: dotted zero
  ss11: simplified 1
  */
    font-feature-settings: "ss01", "ss02", "ss07", "ss08", "ss10", "ss11";
  }

  dl {
  }

  dt {
    text-transform: uppercase;
    font-size: var(--text-size--1);
    font-weight: 600;
  }

  dd {
    font-size: var(--text-size-0);
    margin-inline: 0;
  }

  pre.hljs {
    font-family: "Bergen Mono", monospace;
    font-size: var(--text-size--1);
    padding: var(--space-s);
    overflow: scroll;
  }

  code:not([data-language]) {
    font-size: var(--text-size--1);
    font-family: "Bergen Mono", monospace;
    padding: 0.2ch 0.4ch;
  }

  nav a {
    padding: 0 var(--space-3xs);
  }

  nav a[aria-current] {
    background-color: var(--fg);
    border: 3px solid var(--fg);
    color: var(--bg);
    text-decoration: none;
  }

  @view-transition {
    navigation: auto;
  }

  .js {
    img[loading="lazy"] {
      opacity: 0;
    }

    img[loading="lazy"].loaded.visible {
      opacity: 1;
      transition: opacity 300ms;
    }
  }
}