@layer base, internal;

/* src/lib/font-face.css */
@layer base {
  @font-face {
    font-family: heliotrope;
    font-style: normal;
    font-weight: normal;
    font-stretch: normal;
    font-display: auto;
    src: url(https://static.curtmerrill.com/fonts/heliotrope_ot_3_book.woff2) format("woff2");
  }
  @font-face {
    font-family: heliotrope;
    font-style: italic;
    font-weight: normal;
    font-stretch: normal;
    font-display: auto;
    src: url(https://static.curtmerrill.com/fonts/heliotrope_ot_3_book_italic.woff2) format("woff2");
  }
  @font-face {
    font-family: heliotrope;
    font-style: normal;
    font-weight: bold;
    font-stretch: normal;
    font-display: auto;
    src: url(https://static.curtmerrill.com/fonts/heliotrope_ot_6_semibold.woff2) format("woff2");
  }
  @font-face {
    font-family: heliotrope;
    font-style: italic;
    font-weight: bold;
    font-stretch: normal;
    font-display: auto;
    src: url(https://static.curtmerrill.com/fonts/heliotrope_ot_6_semibold_italic.woff2) format("woff2");
  }
  @font-face {
    font-family: heliotrope;
    font-style: normal;
    font-weight: 800;
    font-stretch: normal;
    font-display: auto;
    src: url(https://static.curtmerrill.com/fonts/heliotrope_ot_8_black.woff2) format("woff2");
  }
  @font-face {
    font-family: heliotrope;
    font-style: italic;
    font-weight: 800;
    font-stretch: normal;
    font-display: auto;
    src: url(https://static.curtmerrill.com/fonts/heliotrope_ot_8_black_italic.woff2) format("woff2");
  }
}

/* src/lib/variables.css */
@layer base {
  :root {
    --f-serif:
      heliotrope,
      Georgia,
      serif;
    --f-sans: sans-serif;
    --f-mono: "SF Mono", monospace;
    --blue: #085b87;
    --orange: #9C622F;
    --pink: #a3345e;
    --white: #fafbfc;
    --black: #202122;
    --step--1: clamp(0.8rem, 0.722rem + 0.3902vw, 1rem);
    --step-0: clamp(1rem, 0.9024rem + 0.4878vw, 1.25rem);
    --step-1: clamp(1.25rem, 1.128rem + 0.6098vw, 1.5625rem);
    --step-2: clamp(1.5625rem, 1.4101rem + 0.7622vw, 1.9531rem);
    --step-3: clamp(1.9531rem, 1.7626rem + 0.9527vw, 2.4414rem);
    --step-4: clamp(2.4414rem, 2.2032rem + 1.1909vw, 3.0518rem);
    --step-5: clamp(3.0518rem, 2.754rem + 1.4887vw, 3.8147rem);
    --space-xs: clamp(0.6875rem, 0.5899rem + 0.4878vw, 0.9375rem);
    --space-s: clamp(0.875rem, 0.7287rem + 0.7317vw, 1.25rem);
    --space-m: clamp(1.3125rem, 1.093rem + 1.0976vw, 1.875rem);
    --space-l: clamp(1.75rem, 1.4573rem + 1.4634vw, 2.5rem);
    --space-xl: clamp(2.625rem, 2.186rem + 2.1951vw, 3.75rem);
    --space-2xl: clamp(3.5rem, 2.9146rem + 2.9268vw, 5rem);
    --space-xs-s: clamp(0.6875rem, 0.468rem + 1.0976vw, 1.25rem);
    --space-s-m: clamp(0.875rem, 0.4848rem + 1.9512vw, 1.875rem);
    --space-m-l: clamp(1.3125rem, 0.8491rem + 2.3171vw, 2.5rem);
    --space-l-xl: clamp(1.75rem, 0.9695rem + 3.9024vw, 3.75rem);
    --space-xl-2xl: clamp(2.625rem, 1.6982rem + 4.6341vw, 5rem);
    --space-s-2xl: clamp(0.875rem, -0.7348rem + 8.0488vw, 5rem);
    --blue-1: light-dark(#f6f9fb, #15232c);
    --blue-2: light-dark(#eef5f9, #172733);
    --blue-3: light-dark(#e0effb, #0e364e);
    --blue-4: light-dark(#d1e8f9, #004164);
    --blue-5: light-dark(#c1def4, #004e75);
    --blue-6: light-dark(#add1eb, #095b87);
    --blue-7: light-dark(#93c0e0, #116c9d);
    --blue-8: light-dark(#6ca9d4, #0b7fba);
    --blue-9: light-dark(#085b87, #6ccaff);
    --blue-10: light-dark(#004b76, #6cbff7);
    --blue-11: light-dark(#226b98, #70c3fc);
    --blue-12: light-dark(#1f3e54, #c7ecff);
    --blue-contrast: light-dark(#fff, #0e2433);
    --blue-surface: light-dark(#ebf4f9cc, #0f2d4480);
    --blue-indicator: light-dark(#085b87, #6ccaff);
    --blue-track: light-dark(#085b87, #6ccaff);
    --gray-1: light-dark(#f7f7f8, #202122);
    --gray-2: light-dark(#f3f4f4, #272829);
    --gray-3: light-dark(#eaeaeb, #2f3032);
    --gray-4: light-dark(#e1e2e3, #353637);
    --gray-5: light-dark(#dadbdc, #3b3c3d);
    --gray-6: light-dark(#d2d3d4, #434445);
    --gray-7: light-dark(#c6c8ca, #4f5052);
    --gray-8: light-dark(#b3b5b7, #676869);
    --gray-9: light-dark(#858789, #737475);
    --gray-10: light-dark(#7b7d7f, #7e8081);
    --gray-11: light-dark(#5d5f60, #b5b6b8);
    --gray-12: light-dark(#1f2021, #edeeef);
    --gray-contrast: #FFFFFF;
    --gray-surface: light-dark(#ffffffcc, rgba(0, 0, 0, 0.05));
    --gray-indicator: light-dark(#858789, #737475);
    --gray-track: light-dark(#858789, #737475);
  }
}

/* src/lib/base.css */
@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    color-scheme: light dark;
  }
  html:has(#mode-picker [value=light]:checked) {
    color-scheme: light;
  }
  html:has(#mode-picker [value=dark]:checked) {
    color-scheme: dark;
  }
  body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    height: 100%;
    min-height: 100vh;
    font-family: var(--f-sans);
    font-size: var(--step-0);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    color: light-dark(var(--black), var(--white));
    background: light-dark(var(--white), var(--black));
  }
  .main {
    flex-grow: 1;
  }
  main,
  article {
    padding-inline: var(--space-s-2xl);
  }
  sup,
  sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
    font-size: .85em;
  }
  sub {
    top: 0.4em;
  }
  img,
  picture,
  video,
  iframe,
  object,
  svg,
  embed {
    display: block;
    max-width: 100%;
  }
  :target {
    scroll-margin-block: 5ex;
  }
  b,
  strong {
    font-weight: bolder;
  }
  i,
  em {
    font-style: italic;
  }
  h1,
  .h1,
  h2,
  .h2,
  h3,
  .h3,
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    line-height: 1.2;
    font-weight: 800;
    text-wrap: balance;
  }
  h1,
  .h1 {
    font-size: var(--step-4);
  }
  h2,
  .h2 {
    font-size: var(--step-2);
  }
  h3,
  .h3 {
    font-size: var(--step-1);
  }
  h4,
  .h4,
  h5,
  .h5,
  h6,
  .h6 {
    font-size: var(--step-0);
  }
  input,
  select,
  textarea,
  button {
    font: inherit;
  }
  label {
    display: block;
  }
  input:not(:where([type=submit], [type=checkbox], [type=radio], [type=button], [type=reset])) {
    inline-size: 100%;
  }
  button,
  input:where([type=submit], [type=reset], [type=button]) {
    background: CanvasText;
    color: Canvas;
    border: 1px solid transparent;
  }
  textarea {
    field-sizing: content;
    min-block-size: 3lh;
    inline-size: 100%;
    max-inline-size: 100%;
  }
  button,
  input,
  label {
    line-height: 1.2;
  }
  button {
    -webkit-appearance: button;
  }
  a {
    text-underline-offset: .15em;
    text-decoration-skip-ink: auto;
    color: var(--blue-9);
    transition: color .2s ease-in-out;
  }
  a:visited {
    color: inherit;
  }
  a:hover {
    color: var(--orange);
  }
  a.plain,
  a.plain:visited {
    text-decoration: none;
    color: inherit;
  }
  a.plain:hover {
    text-decoration: underline;
  }
  small,
  .small {
    font-size: .8em;
  }
  abbr:hover {
    cursor: help;
  }
  table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  ol,
  ul {
    padding-inline-start: var(--space-m);
  }
  ol > li::marker {
    font-size: .8em;
    font-family: var(--f-sans);
    font-weight: bold;
    color: var(--gray-9);
  }
  ul > li::marker {
    color: var(--gray-9);
  }
  code {
    font-size: .8em;
    line-height: calc(.8em * 1.25);
    font-family: var(--f-mono);
    color: light-dark(var(--pink), oklch(from var(--pink) .7 c h));
    background: var(--gray-2);
    padding-inline: .4em;
    padding-block: .2em;
    border-radius: .5em;
  }
  pre {
    font-family: inherit;
    background: unset;
    padding: unset;
    border-radius: unset;
  }
  pre:has(code) {
    background-color: var(--gray-2);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--space-xs);
    overflow-x: auto;
    overflow-y: visible;
  }
  pre > code {
    padding-inline: 0;
    padding-block: 0;
  }
  hr {
    display: block;
    border-style: unset;
    width: 100%;
    height: 1px;
    background: var(--gray-8);
    margin-block: 1lh;
  }
}

/* src/lib/header-footer.css */
@layer base {
  header {
    background-color: var(--blue);
    color: var(--white);
    padding-inline: var(--space-s-2xl);
    padding-block: var(--space-xs);
  }
  header > div {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .site-name {
    font-weight: 800;
    font-style: italic;
  }
  #mode-picker {
    font-size: .8em;
    background: none;
    border: none;
    box-shadow: none;
    color: #93c0e0;
  }
  footer {
    color: var(--gray-11);
    background-color: var(--gray-2);
    font-size: var(--step--1);
    padding-inline: var(--space-s-2xl);
    padding-block: var(--space-s);
  }
}

/* src/lib/blog-post.css */
@layer base {
  .blog-post {
    font-family: var(--f-serif);
    margin-block-start: var(--space-2xl);
    margin-block-end: calc(var(--space-2xl) * 1.5);
    max-width: var(--main-column, 60ch);
  }
  .blog-post > *:first-child {
    margin-block-start: 0;
    margin-block-end: 0;
  }
  .blog-post > * + * {
    margin-block-start: var(--v-space, 1em);
    margin-block-end: 0;
  }
  .blog-post > figure {
    margin-block: calc(var(--v-space, 1em) * 2);
  }
  .meta {
    color: var(--gray-9);
    font-family: var(--f-sans);
  }
  .blog-post > h1 {
    --v-space: 1rem;
  }
  .blog-post > .subtitle {
    --v-space: 1rem;
    font-size: var(--step-1);
    color: var(--gray-9);
  }
  .footnote {
    margin-top: var(--space-2xl);
    font-family: var(--f-sans);
    font-size: var(--step--1);
  }
  .archive-list {
    line-height: 1.4;
    margin-bottom: var(--space-xs);
  }
  .archive-list > span {
    display: block;
    font-weight: bold;
    color: var(--gray-9);
    margin-bottom: var(--space-xs);
  }
}

/* src/lib/figure.css */
@layer base {
  figure {
    margin-inline: 0;
  }
  figure.wide {
    width: calc(var(--main-column, 60ch) * 1.5);
    max-width: calc(100svw - var(--space-s-2xl) - var(--space-s-2xl));
  }
  figure.border > *:first-child {
    border: 1px solid var(--gray-8);
  }
  figure > *:first-child {
    border-radius: var(--b-radius, 0);
  }
  figcaption {
    font-family: var(--f-sans);
    font-size: var(--step--1);
    color: var(--gray-9);
    margin-top: var(--space-xs);
  }
}

/* src/lib/lists.css */
@layer base {
  ul.plain {
    padding-inline: 0;
    margin-inline: 0;
    list-style-type: none;
  }
  .list-header {
    font-weight: bold;
    text-transform: uppercase;
    font-size: .8em;
    margin-block-end: 0;
  }
}

/* src/lib/utilities.css */
@layer base {
  .invisible {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    border: 0;
    overflow: hidden;
  }
  .margin-top {
    margin-block-start: var(--top-margin, 1em);
  }
  .container {
    background-color: var(--color-bg, none);
    padding-inline: var(--space-s-2xl);
    padding-block: var(--v-padding, 0);
  }
  .halves {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--space-s);
    container-type: inline-size;
  }
  .thirds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--space-s);
    container-type: inline-size;
  }
  .thirds > * {
    grid-column: auto / span 3;
  }
  @container (width > 550px) {
    .one-col {
      grid-column: auto / span 1;
    }
    .two-col {
      grid-column: auto / span 2;
    }
  }
  .small {
    font-size: .8em;
  }
  .mono {
    font-family: var(--f-mono);
  }
  .sans {
    font-family: var(--f-sans);
  }
  .serif {
    font-family: var(--f-serif);
  }
}

/* src/cmcss.css */
/*# sourceMappingURL=cmcss.css.map */