@layer reset, color, type, columns, content;

/* src/styles/color.css */
@layer color {
  :root {
    --gry-25: #070707;
    --gry-50: #0e0e0e;
    --gry-75: #131313;
    --gry-100: #181818;
    --gry-125: #1d1d1d;
    --gry-150: #262626;
    --gry-200: #303030;
    --gry-250: #3e3e3e;
    --gry-300: #4b4b4b;
    --gry-400: #5e5e5e;
    --gry-500: #797979;
    --gry-600: #969696;
    --gry-700: #ababab;
    --gry-750: #bbbbbb;
    --gry-800: #c9c9c9;
    --gry-850: #d4d4d4;
    --gry-875: #dfdfdf;
    --gry-900: #e8e8e8;
    --gry-925: #eeeeee;
    --gry-950: #f3f3f3;
    --gry-975: #f6f6f6;
    --clay-25: #110213;
    --clay-50: #1a071a;
    --clay-75: #1e0d1e;
    --clay-100: #241123;
    --clay-125: #2b162a;
    --clay-150: #361d33;
    --clay-200: #46263c;
    --clay-250: #573248;
    --clay-300: #6a3e50;
    --clay-400: #7b5358;
    --clay-500: #917270;
    --clay-600: #aa9089;
    --clay-700: #bba79e;
    --clay-750: #cab8ae;
    --clay-800: #d6c6bd;
    --clay-850: #dfd2c9;
    --clay-875: #e8ded5;
    --clay-900: #f0e6de;
    --clay-925: #f4ede6;
    --clay-950: #f8f3ec;
    --clay-975: #fbf5ef;
    --cya-25: #010906;
    --cya-50: #00120c;
    --cya-75: #001710;
    --cya-100: #001c14;
    --cya-125: #002319;
    --cya-150: #002c21;
    --cya-200: #00382a;
    --cya-250: #004736;
    --cya-300: #005642;
    --cya-400: #016c54;
    --cya-500: #018a6c;
    --cya-600: #00aa86;
    --cya-700: #01c299;
    --cya-750: #1cd4a8;
    --cya-800: #41e2b6;
    --cya-850: #5decc2;
    --cya-875: #78f6cf;
    --cya-900: #92fdd9;
    --cya-925: #aaffe2;
    --cya-950: #cbffec;
    --cya-975: #e4fcf3;
    --grn-25: #060802;
    --grn-50: #0b1000;
    --grn-75: #101500;
    --grn-100: #141a00;
    --grn-125: #182100;
    --grn-150: #1c2a00;
    --grn-200: #243600;
    --grn-250: #2e4400;
    --grn-300: #3a5300;
    --grn-400: #4b6700;
    --grn-500: #638400;
    --grn-600: #7da200;
    --grn-700: #95b717;
    --grn-750: #a9c72e;
    --grn-800: #b9d442;
    --grn-850: #c7df52;
    --grn-875: #d6e966;
    --grn-900: #e2f07a;
    --grn-925: #eaf58e;
    --grn-950: #f2f9aa;
    --grn-975: #f7f9d3;
    --yel-25: #0c0602;
    --yel-50: #160c00;
    --yel-75: #1c1100;
    --yel-100: #211500;
    --yel-125: #2a1a00;
    --yel-150: #352100;
    --yel-200: #442b00;
    --yel-250: #553700;
    --yel-300: #674400;
    --yel-400: #7e5500;
    --yel-500: #a06f00;
    --yel-600: #c58900;
    --yel-700: #dd9f00;
    --yel-750: #efaf03;
    --yel-800: #fbbe2c;
    --yel-850: #ffcc57;
    --yel-875: #ffda8d;
    --yel-900: #ffe5ad;
    --yel-925: #ffebc0;
    --yel-950: #fff2d2;
    --yel-975: #fbf6ea;
    --orn-25: #0d0603;
    --orn-50: #190a00;
    --orn-75: #200f00;
    --orn-100: #271200;
    --orn-125: #311600;
    --orn-150: #3f1b00;
    --orn-200: #512300;
    --orn-250: #662c00;
    --orn-300: #7b3600;
    --orn-400: #9a4300;
    --orn-500: #c55700;
    --orn-600: #e7750b;
    --orn-700: #fa8d31;
    --orn-750: #ffa55b;
    --orn-800: #ffb980;
    --orn-850: #ffc99c;
    --orn-875: #ffd7b6;
    --orn-900: #ffe2ca;
    --orn-925: #ffead7;
    --orn-950: #fff1e4;
    --orn-975: #fbf5f0;
    --red-25: #100404;
    --red-50: #250201;
    --red-75: #2e0306;
    --red-100: #37010c;
    --red-125: #400414;
    --red-150: #4d0919;
    --red-200: #65011f;
    --red-250: #7b082a;
    --red-300: #970032;
    --red-400: #ba003e;
    --red-500: #e5264b;
    --red-600: #ff5a63;
    --red-700: #ff867f;
    --red-750: #ffa294;
    --red-800: #ffb7ab;
    --red-850: #fdc7bd;
    --red-875: #fed6cf;
    --red-900: #ffe1db;
    --red-925: #fde9e5;
    --red-950: #fff0ed;
    --red-975: #fdf4f3;
    --pur-25: #13020f;
    --pur-50: #22011a;
    --pur-75: #2c0023;
    --pur-100: #340027;
    --pur-125: #3e0030;
    --pur-150: #4d003b;
    --pur-200: #600049;
    --pur-250: #77005c;
    --pur-300: #90006c;
    --pur-400: #b10085;
    --pur-500: #da25a4;
    --pur-600: #fb50c0;
    --pur-700: #ff7ecc;
    --pur-750: #ff9cd4;
    --pur-800: #ffb2dc;
    --pur-850: #ffc3e3;
    --pur-875: #ffd3ea;
    --pur-900: #ffe0f0;
    --pur-925: #ffe8f3;
    --pur-950: #ffeff7;
    --pur-975: #fcf4f8;
    --vio-25: #0d0414;
    --vio-50: #160726;
    --vio-75: #1c0837;
    --vio-100: #200847;
    --vio-125: #27095a;
    --vio-150: #310d6e;
    --vio-200: #411785;
    --vio-250: #4f2199;
    --vio-300: #602daf;
    --vio-400: #7740c7;
    --vio-500: #965ce5;
    --vio-600: #b47bff;
    --vio-700: #c697ff;
    --vio-750: #d2acff;
    --vio-800: #dcbdff;
    --vio-850: #e4cbff;
    --vio-875: #ebd9ff;
    --vio-900: #f1e3ff;
    --vio-925: #f4eaff;
    --vio-950: #f8f1ff;
    --vio-975: #f9f5fc;
    --blu-25: #020811;
    --blu-50: #00101e;
    --blu-75: #001527;
    --blu-100: #001a2e;
    --blu-125: #002038;
    --blu-150: #002845;
    --blu-200: #003659;
    --blu-250: #00426b;
    --blu-300: #005081;
    --blu-400: #0164a0;
    --blu-500: #0a80ca;
    --blu-600: #369ee9;
    --blu-700: #52b4fd;
    --blu-750: #7ac4ff;
    --blu-800: #97d1ff;
    --blu-850: #acdbff;
    --blu-875: #c0e5ff;
    --blu-900: #cfedff;
    --blu-925: #d9f2ff;
    --blu-950: #e2f7ff;
    --blu-975: #e7faff;
  }
  :root {
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
    }
  }
  .lightTheme,
  [data-theme-appearance=light] {
    color-scheme: light;
  }
  .darkTheme,
  [data-theme-appearance=dark] {
    color-scheme: dark;
  }
  :root {
    --bg-out1: light-dark( var(--clay-950), var(--clay-050) );
    --bg-main: light-dark( var(--clay-900), var(--clay-100) );
    --bg-mid1: light-dark( var(--clay-850), var(--clay-150) );
    --bg-mid2: light-dark( var(--clay-800), var(--clay-200) );
    --bg-mid3: light-dark( var(--clay-700), var(--clay-300) );
    --bg-red-main: light-dark( var(--red-800), var(--red-200));
    --bg-pur-main: light-dark( var(--pur-800), var(--pur-200));
    --bg-blu-main: light-dark( var(--blu-800), var(--blu-200));
    --bg-cya-main: light-dark( var(--cya-800), var(--cya-200));
    --bg-grn-main: light-dark( var(--grn-800), var(--grn-200));
    --bg-orn-main: light-dark( var(--orn-800), var(--orn-200));
    --bg-yel-main: light-dark( var(--yel-800), var(--yel-200));
    --fg-mid3: light-dark( var(--clay-500), var(--clay-600));
    --fg-mid2: light-dark( var(--clay-400), var(--clay-700));
    --fg-mid1: light-dark( var(--clay-300), var(--clay-800));
    --fg-main: light-dark( var(--clay-150), var(--clay-900));
    --fg-out1: light-dark( var(--clay-100), var(--clay-950));
    --fg-red-main: light-dark( var(--red-200), var(--red-800) );
    --fg-pur-main: light-dark( var(--pur-200), var(--pur-800) );
    --fg-blu-main: light-dark( var(--blu-200), var(--blu-800) );
    --fg-cya-main: light-dark( var(--cya-200), var(--cya-800) );
    --fg-grn-main: light-dark( var(--grn-200), var(--grn-800) );
    --fg-orn-main: light-dark( var(--orn-200), var(--orn-800) );
    --fg-yel-main: light-dark( var(--yel-200), var(--yel-800) );
    --fg-red-mid2: light-dark( var(--red-400), var(--red-600) );
    --fg-pur-mid2: light-dark( var(--pur-400), var(--pur-600) );
    --fg-blu-mid2: light-dark( var(--blu-400), var(--blu-600) );
    --fg-cya-mid2: light-dark( var(--cya-400), var(--cya-600) );
    --fg-grn-mid2: light-dark( var(--grn-400), var(--grn-600) );
    --fg-orn-mid2: light-dark( var(--orn-400), var(--orn-600) );
    --fg-yel-mid2: light-dark( var(--yel-400), var(--yel-600) );
    --fg-red-mid3: var(--red-500);
    --fg-pur-mid3: var(--pur-500);
    --fg-blu-mid3: var(--blu-500);
    --fg-cya-mid3: var(--cya-500);
    --fg-grn-mid3: var(--grn-500);
    --fg-orn-mid3: var(--orn-500);
    --fg-yel-mid3: var(--yel-500);
    --fg-link: light-dark( var(--pur-300), var(--yel-700) );
    --bg-accent-out1: light-dark( var(--yel-900), var(--pur-100) );
    --bg-accent: light-dark( var(--yel-800), var(--pur-200) );
    --bg-accent-mid2: light-dark( var(--yel-600), var(--pur-400) );
    --fg-accent-mid2: light-dark( var(--yel-400), var(--pur-600) );
    --fg-accent: light-dark( var(--yel-200), var(--pur-800) );
    --bg-contrast: light-dark( var(--pur-800), var(--yel-200) );
    --bg-contrast-mid2: light-dark( var(--pur-600), var(--yel-400) );
    --fg-contrast-mid2: light-dark( var(--pur-400), var(--yel-700) );
    --fg-contrast: light-dark( var(--pur-200), var(--yel-850) );
  }
}

/* src/styles/type.css */
@layer type {
  @font-face {
    font-family: concourse;
    src: url("./assets/concourse_ot_4_medium-WGL4KNZO.woff2"), format("woff2");
  }
  @font-face {
    font-family: concourse;
    font-style: italic;
    src: url("./assets/concourse_ot_4_medium_italic-EF7XPX4A.woff2"), format("woff2");
  }
  @font-face {
    font-family: valkyrie;
    src: url("./assets/valkyrie_ot_b_regular-FPGLXHIU.woff2"), format("woff2");
  }
  @font-face {
    font-family: valkyrie;
    font-weight: bold;
    src: url("./assets/valkyrie_ot_b_bold-SGH5QGOM.woff2"), format("woff2");
  }
  @font-face {
    font-family: valkyrie;
    font-style: italic;
    src: url("./assets/valkyrie_ot_b_italic-S24Q72EV.woff2"), format("woff2");
  }
  @font-face {
    font-family: valkyrie;
    font-style: italic;
    font-weight: bold;
    src: url("./assets/valkyrie_ot_b_bold_italic-W2GIOKYM.woff2"), format("woff2");
  }
  @font-face {
    font-family: quattro;
    src: url("./assets/iAWriterQuattroS-Regular-C6OX7HNB.woff2"), format("woff2");
  }
  @font-face {
    font-family: quattro;
    font-weight: bold;
    src: url("./assets/iAWriterQuattroS-Bold-V4CKTQQG.woff2"), format("woff2");
  }
  @font-face {
    font-family: quattro;
    font-style: italic;
    src: url("./assets/iAWriterQuattroS-Italic-CBAYETK7.woff2"), format("woff2");
  }
  @font-face {
    font-family: quattro;
    font-weight: bold;
    font-style: italic;
    src: url("./assets/iAWriterQuattroS-BoldItalic-UCDWR7YL.woff2"), format("woff2");
  }
  :root {
    --font-serif: quattro, serif;
    --font-sans:
      quattro,
      system-ui,
      sans-serif;
    --font-mono:
      ui-monospace,
      "Cascadia Code",
      "Source Code Pro",
      Menlo,
      monospace;
    --font-body:
      quattro,
      system-ui,
      Helvetica,
      Verdana,
      sans-serif;
    --font-heading:
      valkyrie,
      Palatino,
      Georgia,
      serif;
    --font-system:
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Oxygen,
      Ubuntu,
      Cantarell,
      "Fira Sans",
      "Droid Sans",
      "Helvetica Neue",
      sans-serif;
    --font-size-base: 16px;
    --font-size-tablet: 18px;
    --font-s3: 0.625rem;
    --font-s2: 0.75rem;
    --font-s1: 0.875rem;
    --font-md: 1rem;
    --font-l1: 1.125rem;
    --font-l2: 1.25rem;
    --font-l3: 1.5rem;
    --font-l4: 2rem;
    --font-l5: 2.5rem;
    --font-l6: 3rem;
    --font-l7: 4rem;
    --fg-link-underline: var(--fg-link);
    --line-height-bare: 1rem;
    --line-height-tiny: 1.2rem;
    --line-height-small: 1.4rem;
    --line-height-normal: 1.8rem;
    --line-height-l5: 2.5rem;
    --tracking-normal: 0rem;
    --tracking-wide: 0.05rem;
    --tracking-wider: 0.1rem;
    --tracking-widest: 0.15rem;
  }
  .serif {
    font-family: var(--font-serif);
    font-variant-numeric: oldstyle-nums proportional-nums;
    font-feature-settings:
      "liga",
      "calt",
      "onum";
  }
  .sans {
    font-family: var(--font-sans);
    font-feature-settings: "calt" 1, "onum" 0;
  }
  .leading-thought > p:first-of-type::first-line {
    font-size: var(--font-size-l1);
    font-weight: bold;
    line-height: var(--line-height-normal);
  }
  p.leading-thought::first-line {
    font-weight: bold;
    color: var(--fg-mid1);
  }
  .raise-cap > p:first-of-type:first-letter {
    -webkit-initial-letter: 2 1;
    initial-letter: 2 1;
    padding-right: var(--space-s2);
  }
  .links-textual a,
  .link-textual {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: var(--fg-link-underline);
    text-decoration-thickness: 0.08em;
    text-decoration-skip-ink: all;
    border-radius: var(--radius-xs);
    transition: background-color 0.3s ease-in-out, text-decoration-color 0.3s ease-in-out;
    &:hover,
    &:focus {
      background-color: var(--bg-accent);
    }
  }
  .links-apparent a,
  .link-apparent {
    color: var(--fg-link);
    text-decoration: none;
  }
  .links-apparent a *::hover,
  .link-apparent *::hover {
    cursor: pointer;
  }
  .lining-figures {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
}

/* src/styles/columns.css */
@layer columns {
  body {
    --cadence: var(--space-md);
    --aside-width: 15rem;
    font-size: var(--font-md);
    line-height: var(--line-height-normal);
    container: column / inline-size;
  }
  .typical-flow {
    display: grid;
    --column-gap: var(--space-md);
    column-gap: var(--column-gap);
    --page-margins: calc(2 * var(--column-gap));
    grid-template-columns: 0 [main-start] min(980px, calc(100% - var(--page-margins))) [main-end] 0;
  }
  .typical-flow > * {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
  }
  .typical-flow article :is(header, section, footer) {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    row-gap: var(--cadence);
    position: relative;
  }
  .typical-flow article :is(header, section, footer) > :not(aside, section),
  .typical-flow article > :not(aside, section, header, footer) {
    grid-column: main-start;
  }
  .typical-flow article :is(header, section, footer) {
    :is(ol, ul, li, blockquote, figure) {
      display: grid;
      grid-template-columns: subgrid;
      row-gap: var(--space-sm);
      &.compact,
      .compact & {
        row-gap: var(--space-s2);
      }
      > :not(aside, ul, ol, li) {
        grid-column: main-start;
      }
    }
    :is(ol, ul, li) {
      grid-column: main-start / main-end;
    }
    :is(blockquote, figure[data-blockquote-container]) {
      grid-column: main-start / span 1;
    }
  }
  .typical-flow aside {
    grid-column: main-start;
    display: grid;
    grid-template-columns: [main-start] 1fr;
    & > *:last-child {
      margin-bottom: var(--space-s1);
    }
  }
  @container column (width > 500px) {
    main {
      --column-gap: var(--space-lg);
      --page-margins: calc(2 * var(--column-gap));
    }
  }
  @container column (width >=1000px) {
    .typical-flow {
      --column-gap: var(--space-lg);
      column-gap: var(--column-gap);
      --page-margins: calc(2 * var(--column-gap));
    }
    .typical-flow.layout-default {
      grid-template-columns: 1fr [main-start] min(45rem, calc(100% - var(--page-margins))) [main-end] 1fr;
    }
    .typical-flow.layout-aside-medium {
      grid-template-columns: 1fr [main-start] min(45rem, calc(100% - var(--page-margins) - var(--column-gap) - var(--aside-width))) [aside] var(--aside-width) [main-end] 1fr;
    }
    .typical-flow.layout-single-narrow {
      grid-template-columns: 1fr [main-start] min(40rem, calc(100% - var(--page-margins))) [aside] 0 [main-end] 1fr;
    }
    .typical-flow .break-aside {
      grid-column: main-start / main-end;
    }
    .typical-flow .remove-inner-column {
      display: block;
    }
    .typical-flow aside {
      grid-column: aside;
      height: 0;
    }
  }
}

/* src/styles/content.css */
@layer content {
  .typical-flow {
    article {
      text-wrap: pretty;
      row-gap: var(--cadence);
    }
    a.external {
      &::after {
        color: var(--fg-link);
      }
    }
    aside {
      row-gap: var(--space-sm);
      font-size: var(--font-s1);
      line-height: var(--line-height-small);
      @container (width < 1000px) {
        max-width: min(70vh, calc(3 * var(--aside-width)));
        background-color: var(--bg-accent);
        border-top-left-radius: var(--radius-sm);
        border-bottom-left-radius: var(--radius-sm);
        justify-self: end;
        margin-right: calc(-1 * var(--column-gap));
        padding: var(--space-sm) var(--space-md) 0;
        padding-right: calc(1 * var(--column-gap));
        text-align: right;
      }
      @container (width >= 1000px) {
        margin-top: calc(var(--line-height-normal) - var(--line-height-small));
      }
      img {
        max-width: 100%;
        border-radius: var(--radius-sm);
      }
    }
    figure[data-blockquote-container] {
      background: var(--bg-mid1);
      border-radius: var(--radius-md);
      padding-bottom: var(--space-s1);
      grid-column: main-start;
      @container (width < 1000px) {
        margin-left: calc(-1 * var(--column-gap));
        padding-left: calc(1 * var(--column-gap));
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        @container (width > 480px) {
          margin-right: calc(1 * var(--column-gap));
          blockquote {
            margin-right: 0;
          }
        }
      }
    }
    blockquote {
      padding: var(--space-s1) var(--space-md);
      position: relative;
      background-color: var(--bg-accent-out1);
      border-radius: var(--radius-md);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: 3px solid var(--bg-accent-mid2);
      font-size: var(--font-s1);
      line-height: var(--line-height-small);
      @container (width < 1000px) {
        margin-left: calc(-1 * var(--column-gap));
        padding-left: calc(1 * var(--column-gap));
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        @container (width > 480px) {
          margin-right: calc(1 * var(--column-gap));
        }
      }
      &.story {
        font-size: var(--font-s1);
        line-height: var(--line-height-small);
      }
    }
    p code {
      padding: 2px;
      margin: -2px;
      border-radius: var(--space-s2);
      font-size: var(--font-s2);
      line-height: 1;
      background-color: var(--bg-mid1);
      color: var(--fg-main);
    }
    pre.shiki {
      font-family: var(--font-mono);
      font-size: var(--font-s2);
      line-height: var(--line-height-tiny);
      tab-size: 2;
      margin: 0 calc(-1 * var(--space-s1));
      padding: var(--space-s1);
      border-radius: var(--radius-s1);
      background-color: var(--bg-out1);
      color: var(--fg-mid1);
      @container (width < 800px) {
        margin: 0 calc(-1 * var(--space-md));
        padding: var(--space-md);
        border-radius: 0;
        white-space: pre-wrap;
        text-indent: 27px hanging each-line;
      }
      .constant {
        color: var(--fg-yel-mid2);
      }
      .string {
        color: var(--fg-grn-mid2);
      }
      .comment {
        color: var(--fg-out1);
        background-color: var(--bg-accent);
        margin: -2px -5px;
        padding: 2px 5px;
        border-radius: 3px;
      }
      .keyword {
        color: var(--fg-vio-mid2);
      }
      .parameter {
        color: var(--fg-blu-mid2);
      }
      .function {
        color: var(--fg-pur-mid2);
      }
      .string-expression {
        color: var(--fg-cya-mid2);
      }
      .punctuation {
        color: var(--fg-mid2);
      }
      .link {
        color: var(--fg-link);
      }
    }
    figure {
      grid-column: main-start/main-end;
      img {
        border-radius: var(--radius-sm);
        max-width: 100%;
        width: 100%;
      }
      figcaption {
        font-size: var(--font-s1);
        line-height: var(--line-height-small);
      }
      @container (width >= 640px) {
        &.centered-mid {
          grid-template-columns: 1fr 640px 1fr;
          > * {
            grid-column: 2;
          }
        }
      }
    }
    figure.main-col {
      @container (width >= 768px) {
        grid-column: main-start/span 1;
      }
    }
    footer {
      font-size: var(--font-s1);
      line-height: var(--line-height-small);
      h2 {
        font-size: var(--font-md);
        line-height: var(--line-height-normal);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide);
      }
      :is(ol, ul) {
        line-height: unset;
      }
    }
    .footnote-def {
      font-size: var(--font-md);
      position: relative;
      @container (width <= 600px) {
        display: flex;
      }
    }
    .footnote-return {
      margin-left: var(--space-s1);
    }
    img {
      &.round-slightly {
        border-radius: var(--radius-sm);
      }
    }
    mark {
      margin: 0 -2px;
      padding: 0 2px;
      border-radius: var(--radius-xs);
      color: var(--marker-fg);
      background-color: var(--marker-bg);
      code {
        background: unset;
      }
      &.green {
        background-color: var(--bg-grn-main);
        color: var(--fg-grn-main);
      }
      &.green-fg {
        color: var(--fg-grn-main);
      }
      &.yellow {
        background-color: var(--bg-yel-main);
        color: var(--fg-yel-main);
      }
      &.yellow-fg {
        color: light-dark(var(--yel-300), var(--yel-700));
      }
      &.cyan {
        background-color: var(--bg-cya-main);
        color: var(--fg-cya-main);
      }
      &.cyan-fg {
        color: var(--fg-cya-main);
      }
      &.purple {
        background-color: var(--bg-pur-main);
        color: var(--fg-pur-main);
      }
      &.purple-fg {
        color: var(--fg-pur-main);
      }
      &.red {
        background-color: var(--bg-red-main);
        color: var(--fg-red-main);
      }
      &.red-fg {
        color: var(--fg-red-main);
      }
      &.orange {
        background-color: var(--bg-orn-main);
        color: var(--fg-orn-main);
      }
      &.orange-fg {
        color: var(--fg-orn-main);
      }
      &.dim {
        color: var(--fg-mid2);
      }
    }
    :is(ol, ul) {
      counter-reset: foobar;
      line-height: var(--line-height-normal);
      > li {
        margin-left: calc(2 * var(--space-md));
        break-inside: avoid-column;
        list-style: none;
        position: relative;
        &:before {
          position: absolute;
          left: calc(-1 * var(--space-md));
          text-align: right;
        }
      }
    }
    ol > li:before {
      left: calc(-3 * var(--space-md));
      width: calc(2 * var(--space-md));
      padding-right: calc(var(--space-sm));
      margin-right: calc(-1 var(--space-md));
      border-right: 1px solid var(--fg-contrast);
      counter-increment: foobar;
      content: counter(foobar);
      font-family: var(--font-sans);
      color: var(--fg-contrast-mid2);
    }
    ul > li {
      &:before {
        content: "➤";
        color: var(--fg-mid1);
        font-size: var(--font-s2);
        margin-top: 2px;
      }
      ul > li:before {
        content: "➣";
      }
      ul ul > li:before {
        content: "‣";
        margin-top: 0;
      }
      ul ul ul > li:before {
        content: "•";
        margin-top: 0;
      }
    }
    table {
      margin-left: calc(-1 * var(--space-sm));
      margin-right: calc(-1 * var(--space-sm));
      border-collapse: collapse;
      width: 100%;
      vertical-align: top;
    }
    table > :not(caption) > * > * {
      padding-top: var(--space-s2);
      padding-bottom: var(--space-s2);
      padding-right: var(--space-s1);
      padding-left: var(--space-s1);
    }
    table > thead > * > * {
      font-weight: bold;
      border-bottom: 1px solid var(--fg-main);
    }
    table > tbody > * > * {
      border-bottom: 1px solid var(--bg-mid1);
    }
    tablewrap {
      overflow-x: scroll;
    }
    tablewrap.compact {
      font-size: var(--font-s1);
      table > :not(caption) > * > * {
        padding-top: var(--space-s3);
        padding-bottom: var(--space-s3);
      }
    }
    tablewrap.flat {
      font-size: var(--font-s2);
      line-height: var(--line-height-small);
      table {
        margin-left: unset;
      }
      table > :not(caption) > * > * {
        padding-top: 0;
        padding-bottom: 0;
      }
      table > tbody > * > * {
        border: none;
      }
      table > tbody > tr:nth-child(even) > td {
        background-color: color-mix(in oklch, var(--bg-mid1), var(--bg-main) 30%);
        --alt-radius: var(--radius-sm);
        &:first-child {
          border-top-left-radius: var(--alt-radius);
          border-bottom-left-radius: var(--alt-radius);
        }
        &:last-child {
          border-top-right-radius: var(--alt-radius);
          border-bottom-right-radius: var(--alt-radius);
        }
      }
    }
  }
  .two-columns {
    @container (width >= 600px) {
      grid-template-columns: 1fr 1fr;
      & > * {
        grid-column: unset;
      }
    }
  }
  .three-columns {
    @container (width >= 560px) {
      & > * {
        grid-column: unset;
      }
      grid-template-columns: 1fr 1fr;
    }
    @container (width >= 800px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }
  .dense {
    row-gap: var(--space-s2);
  }
  .article-lead {
    font-size: var(--font-s1);
    line-height: var(--line-height-small);
  }
  .further-reading {
    h3 {
      font-size: var(--font-l1);
      line-height: var(--line-height-small);
      margin-bottom: calc(-1 * var(--space-sm));
      a {
        color: var(--fg-link);
        text-decoration: none;
      }
    }
    blockquote {
      color: var(--fg-mid1);
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }
  }
  .sectionMark,
  .footnote-mark {
    color: var(--fg-mid3);
    opacity: 0.8;
    text-decoration: none;
    position: absolute;
    @container (width >= 1000px) {
      left: calc(-1 * var(--space-md));
    }
    @container (width < 1000px) {
      & + * {
        text-indent: 1rem;
      }
    }
  }
  .full-column-width {
    grid-column: main-start / main-end;
    grid-template-columns: 1fr;
  }
  #page-info {
    display: grid;
    row-gap: var(--space-s1);
    grid-template-columns: subgrid;
    .meta {
      display: grid;
      grid-template-columns: 1fr;
      grid-column: main-start / main-end;
      row-gap: var(--space-s2);
      border: 0 solid var(--bg-mid1);
      border-bottom-width: 1px;
      padding: var(--space-s1) 0;
      font-size: var(--font-s1);
      & > * {
        grid-column: 1;
      }
      .taxonomy {
        display: grid;
        @container (width > 500px) {
          grid-template-columns: auto 1fr;
          column-gap: var(--space-s1);
        }
        .type-growth {
          display: flex;
          column-gap: var(--space-s1);
          text-transform: uppercase;
          align-items: safe center;
          .type {
            color: var(--fg-mid1);
          }
          .growth {
            color: var(--fg-cya-mid2);
          }
          .growth-icon {
            color: var(--fg-cya-main);
          }
        }
        .growth-desc {
          text-transform: none;
          font-style: italic;
          color: var(--fg-cya-mid3);
        }
      }
      h3.series-title {
        color: var(--fg-mid2);
        font-size: var(--font-s1);
        font-weight: normal;
        font-family: var(--font-sans);
        text-transform: uppercase;
      }
      .byline {
        color: var(--fg-mid2);
      }
      .topics {
        > * {
          margin-right: var(--space-md);
        }
      }
    }
  }
  #masthead {
    margin: var(--space-lg) 0 0;
    grid-column: main-start/main-end;
    h1 {
      font-family: var(--font-heading);
      font-size: var(--font-l5);
      position: relative;
      @container (width < 500px) {
        font-size: var(--font-l4);
      }
      font-weight: normal;
      line-height: var(--font-l5);
      padding-bottom: 0.1125rem;
      display: inline-block;
      text-align-last: end;
      margin-left: -100%;
      padding-left: 100%;
      padding-right: 2rem;
      background:
        linear-gradient(
          to bottom,
          var(--bg-main),
          var(--bg-main) calc(100% - 2px),
          var(--bg-accent) calc(100% - 2px));
      &::after {
        content: "✳︎";
        background:
          linear-gradient(
            to right,
            var(--bg-accent),
            var(--bg-accent) 30%,
            var(--bg-accent-mid2));
        background-clip: text;
        -webkit-text-fill-color: transparent;
        position: absolute;
        font-size: 40px;
        margin-left: 1rem;
        bottom: -22px;
        @media (width < 768px) {
          bottom: -21px;
        }
      }
    }
    h2.subtitle {
      color: var(--fg-mid1);
      font-weight: normal;
      font-size: var(--font-md);
      line-height: var(--line-height-normal);
    }
    .titles {
    }
  }
  .narrow-screen-alert {
    background-color: var(--bg-accent-out1);
    margin: var(--space-md) calc(-1 * var(--space-md));
    padding: var(--space-md);
    &::before {
      content: "⚠️";
      color: var(--fg-red-main);
      font-size: var(--font-l5);
      padding-right: 0.5rem;
      padding-bottom: 0.5rem;
    }
    @media (width > 500px) {
      display: none;
    }
  }
  #site-head {
    background-color: var(--bg-accent);
    row-gap: 0;
    font-family: var(--font-sans);
    font-size: var(--font-s2);
    text-transform: uppercase;
    padding-bottom: var(--space-s2);
    padding-top: var(--space-s1);
    #site-menu-input {
      display: none;
    }
    #site-menu-toggle {
      margin: 0;
      display: flex;
      grid-column: main-start / main-end;
    }
    #site-menu-toggle-icon {
      display: none;
    }
    .overlay {
      display: none;
    }
    #site-menu-close {
      display: none;
    }
    .icon {
      margin-bottom: 0 !important;
    }
    @container (width < 500px) {
      #site-menu {
        visibility: hidden;
        position: fixed;
        flex-direction: column;
        background-color: var(--bg-accent);
        width: 100%;
        top: -200px;
        left: 0;
        z-index: 100;
        padding: var(--column-gap);
        row-gap: var(--space-md);
        transition: visibiltiy .35s, top 0.35s;
        a icon {
          user-select: none;
        }
      }
      #site-menu-toggle {
        width: 1rem;
        height: 14px;
        margin-top: var(--space-s2);
        margin-bottom: var(--space-s1);
        background:
          linear-gradient(
            to bottom,
            var(--fg-main),
            var(--fg-main) 2px,
            var(--bg-accent) 2px,
            var(--bg-accent) 6px,
            var(--fg-main) 6px,
            var(--fg-main) 8px,
            var(--bg-accent) 8px,
            var(--bg-accent) 12px,
            var(--fg-main) 12px,
            var(--fg-main) 14px);
      }
      #site-menu-toggle-icon {
        display: none;
        column-gap: var(--space-sm);
        align-items: safe center;
        user-select: none;
        z-index: 10;
      }
      #site-menu-input:checked + #site-menu-toggle #site-menu {
        visibility: visible;
        top: 0;
        #site-menu-close {
          display: flex;
          column-gap: var(--space-s2);
          align-items: safe center;
        }
      }
      #site-menu-overlay {
        visibility: hidden;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.35s, visibility 0.35s;
        overflow: hidden;
        z-index: 5;
        background: var(--gry-50);
      }
      #site-menu-input:checked ~ #site-menu-overlay {
        visibility: visible;
        opacity: 0.6;
      }
    }
    nav {
      display: flex;
      column-gap: var(--space-md);
    }
    a {
      text-decoration: none;
      color: var(--fg-main);
    }
  }
  #site-footer {
    display: grid;
    grid-column: main-start/main-end;
    grid-template-columns: 1fr;
    margin-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    padding-top: var(--space-md);
    row-gap: var(--space-lg);
    color: var(--fg-mid2);
    font-size: var(--font-s1);
    container: siteFooter / inline-size;
  }
  #footer-links {
    display: grid;
    grid-template-columns: [links-start] repeat(3, 1fr) [links-end];
    gap: var(--space-s1);
    @container (width >= 600px) {
      grid-template-columns: [links-start] repeat(4, 1fr) [links-end];
      column-gap: var(--space-md);
    }
    @container (width >= 768px) {
      grid-template-columns: [links-start] repeat(6, 1fr) [links-end];
    }
    nav {
      display: grid;
      row-gap: var(--space-s1);
      column-gap: var(--space-s1);
      width: 100%;
      grid-template-columns: subgrid;
      grid-column: 1 / -1;
      align-content: start;
      @container (width >= 600px) {
        row-gap: var(--space-s2);
        grid-column: unset;
      }
      h3 {
        font-weight: normal;
        font-size: var(--font-md);
        width: 100%;
        grid-column: links-start / links-end;
        border-bottom: 1px solid var(--bg-mid2);
        padding-bottom: var(--space-s2);
      }
      a {
        color: inherit;
      }
      @container (width >= 768px) {
        &.wider {
          grid-column-end: span 2;
          grid-template-columns: subgrid;
          h3 {
            grid-column: 1 / span 2;
          }
        }
      }
    }
  }
  #copyright {
    --fg-link-underline: var(--fg-mid2);
    color: var(--fg-mid3);
  }
  body.links article {
    h3 {
      margin-top: var(--space-md);
    }
  }
}

/* src/styles/forms.css */
@layer content {
  form {
    display: grid;
    row-gap: var(--space-md);
  }
  .button {
    display: inline-block;
    padding: var(--space-s2) var(--space-s1);
    font-family: var(--font-sans);
    font-size: var(--font-md);
    font-weight: normal;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    border: 1px solid var(--button-border-color);
    border-radius: var(--radius-s1);
    transition:
      color .15s ease-in-out,
      background-color .15s ease-in-out,
      border-color .15s ease-in-out,
      box-shadow .15s ease-in-out;
    cursor: pointer;
    color: var(--fg-main);
    background-color: var(--bg-out1);
    --button-border-color: var(--fg-mid2);
    &.primary {
      --button-border-color: var(--fg-blu-mid2);
      color: var(--fg-main);
      background-color: var(--bg-blu-main);
    }
    &.danger {
      --button-border-color: var(--bg-red-mid2);
      background-color: var(--bg-red-main);
      color: var(--fg-main);
    }
  }
  .control-group {
    display: flex;
    flex-direction: column;
    column-gap: var(--space-md);
    width: 100%;
    @container (width >=768px) {
      flex-direction: row;
    }
  }
  .control {
    width: 100%;
    margin-top: var(--space-md);
    @container (width >=768px) {
      margin-top: 0;
    }
  }
  .control-group-inline {
    display: flex;
    flex-direction: column;
    row-gap: var(--space-sm);
    @container (width >=768px) {
      flex-direction: row;
      column-gap: var(--space-s1);
      align-items: baseline;
    }
  }
  .inline-set {
    display: flex;
    column-gap: var(--space-s1);
    font-size: var(--font-l1);
  }
  input[type=checkbox] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.25rem;
    vertical-align: top;
  }
  :is(input, textarea).textual,
  .textual-inputs :is(input, textarea):not([type=range]) {
    display: block;
    width: 100%;
    padding: var(--space-s2) var(--space-s1);
    appearance: none;
    background-color: var(--bg-out1);
    background-clip: padding-box;
    border: 1px solid var(--bg-accent);
    font-family: var(--font-serif);
    font-size: var(--font-md);
    color: var(--fg-main);
    border-radius: var(--radius-xs);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    &.inline {
      width: auto;
      display: inline;
    }
    &:focus {
      color: var(--fg-main);
    }
    &::-webkit-contacts-auto-fill-button {
      background-color: var(--fg-main);
    }
    &::placeholder {
      color: var(--fg-mid2);
    }
    &:invalid {
      border-color: var(--fg-red-main);
    }
  }
  label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--font-s1);
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: var(--space-s1);
  }
  select {
    --select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    font-family: var(--font-serif);
    display: block;
    width: 100%;
    padding: var(--space-s2) var(--space-s1);
    font-size: var(--font-md);
    appearance: none;
    color: var(--fg-main);
    background-color: var(--bg-out1);
    background-image: var(--select-indicator);
    background-repeat: no-repeat;
    background-position: right var(--space-s1) center;
    background-size: 16px 12px;
    border: 1px solid var(--fg-dimmer);
    border-radius: var(--radius-xs);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }
  .description {
    margin-left: 1.75rem;
  }
  .two-across {
    display: grid;
    gap: var(--space-md);
    @container (width >=768px) {
      grid-template-columns: 1fr 1fr;
    }
  }
}

/* src/styles/default.css */
:root {
  --space-s3: 0.125rem;
  --space-s2: 0.25rem;
  --space-s1: 0.5rem;
  --space-sm: var(--space-s1);
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --col-gap: var(--space-md);
  --col-inset: calc(var(--col-gap) * 2);
  --cadence: var(--size-md);
  --radius-xs: var(--space-s2);
  --radius-s1: var(--space-s1);
  --radius-sm: var(--radius-s1);
  --radius-md: var(--space-md);
  --radius-lg: var(--space-lg);
  --shadow-color: var(--bg-out-2);
  --shadow-small: 0 1px 2px -1px var(--shadow-color);
}
@layer reset {
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
}
html {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  background-color: var(--bg-main);
  color: var(--fg-main);
  font-family: var(--font-serif);
  @media (min-width: 768px) {
    font-size: var(--font-size-tablet);
  }
}
body {
  display: block;
}