@layer reset, base, components;

@font-face {
  font-family: valkyrie;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/valkyrie_ot_a_regular.woff2") format("woff2");
}

@font-face {
  font-family: valkyrie;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/valkyrie_ot_a_italic.woff2") format("woff2");
}

@font-face {
  font-family: heliotrope;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/heliotrope_ot_4_medium.woff2") format("woff2");
}

@font-face {
  font-family: heliotrope;
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/heliotrope_ot_4_medium_italic.woff2") format("woff2");
}

@font-face {
  font-family: heliotrope;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/heliotrope_ot_6_semibold.woff2") format("woff2");
}

@font-face {
  font-family: heliotrope;
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/heliotrope_ot_6_semibold_italic.woff2") format("woff2");
}

@font-face {
  font-family: concourse;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/concourse_ot_4_medium.woff2") format("woff2");
}

@font-face {
  font-family: triplicate;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/triplicate_ot_a_regular.woff2") format("woff2");
}

@font-face {
  font-family: concourse-index;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/concourse_index_regular.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  --surface: light-dark(var(--stone-0), var(--stone-12));
  --surface-raised: light-dark(white, var(--stone-11));
  --text: light-dark(black, var(--stone-2));
  --text-soft: light-dark(var(--stone-10), var(--stone-4));
  --rule: light-dark(var(--stone-4), var(--stone-9));
  --link: light-dark(var(--cyan-9), var(--cyan-4));
  --link-hover: var(--text-soft);
  --link-underline: color-mix(in oklab, currentColor 35%, transparent);
  --mark-edge: light-dark(white, var(--stone-10));
  --mark-fill: light-dark(var(--stone-2), var(--stone-12));

  --font-body: heliotrope, var(--font-serif);
  --font-home: valkyrie, var(--font-serif);
  --font-title: concourse, var(--font-sans);
  --font-code: triplicate, var(--font-mono);
  --font-index: concourse-index, var(--font-sans);

  --font-size-root: clamp(1rem, 2.4vw, 1.375rem);
  --leading-body: 1.42;
  --leading-lead: 1.3;
  --measure: 32rem;
  --home-width: 68rem;
  --home-column: 20rem;
  --title-bar: var(--size-3);
  --font-size-lead: 1.2em;
  --font-size-title: 2em;
  --list-indent: 2em;
  --title-gap: 0.5em;
  --link-underline-offset: 0.18em;
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  p,
  ol,
  ul,
  blockquote,
  pre {
    margin: 0;
  }

  ol,
  ul {
    padding: 0;
  }
}

@layer base {
  html {
    font-size: var(--font-size-root);
  }

  body {
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-feature-settings: "ss01";
    line-height: var(--leading-body);
  }

  p,
  li,
  blockquote {
    margin-block-end: var(--size-3);
    hyphens: auto;
    text-wrap: pretty;
  }

  a {
    color: var(--link);
    text-decoration-line: underline;
    text-decoration-color: var(--link-underline);
    text-decoration-thickness: var(--border-size-1);
    text-underline-offset: var(--link-underline-offset);
  }

  a:hover {
    color: var(--link-hover);
  }

  a:focus-visible {
    outline: var(--border-size-2) solid var(--link);
    outline-offset: var(--size-1);
  }

  h1,
  h2 {
    hyphens: none;
    text-wrap: balance;
  }

  h2 {
    margin-block: var(--size-5) var(--size-1);
    font-size: inherit;
    font-weight: var(--font-weight-6);
    font-feature-settings: "smcp", "c2sc", "ss01";
    line-height: var(--font-lineheight-1);
  }

  h2 a {
    color: inherit;
    text-decoration: none;
  }

  strong {
    font-weight: var(--font-weight-6);
  }

  blockquote {
    padding: var(--size-5) var(--size-5) var(--size-2);
    border-block: var(--border-size-1) solid var(--rule);
    background: var(--surface-raised);
    font-size: 90%;
    font-style: italic;
  }

  ol,
  ul {
    padding-inline-start: var(--list-indent);
  }

  ol > li::marker {
    content: counter(list-item) "\00a0";
    font-family: var(--font-index);
    font-size: var(--font-size-lead);
    font-feature-settings: "ss01" 0;
    font-style: normal;
  }

  ul > li::marker {
    content: "⁂\00a0\00a0";
  }

  code,
  pre {
    font-family: var(--font-code);
    font-feature-settings: "ss01" 0, "ss02";
    font-size: 80%;
  }

  pre {
    margin-block-end: var(--size-3);
    white-space: pre-wrap;
    overflow-wrap: break-word;
  }

  pre code {
    font-size: inherit;
  }
}

@layer components {
  .home {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--home-column)), 1fr));
    gap: var(--size-7);
    align-items: start;
    max-inline-size: var(--home-width);
    margin-inline: auto;
    padding: var(--size-7) clamp(var(--size-3), 5vw, var(--size-8));
    color: var(--text-soft);
    font-family: var(--font-home);
  }

  .home-mark {
    aspect-ratio: 1;
    border: var(--border-size-1) solid var(--text-soft);
    background: radial-gradient(circle at center, var(--mark-edge) 17%, var(--mark-fill) 100%);
  }

  .home-intro > p:first-child {
    font-size: var(--font-size-lead);
    line-height: 1.37;
  }

  .home-intro b {
    font-weight: inherit;
    font-feature-settings: "smcp", "c2sc";
    hyphens: none;
  }

  .home-links {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
  }

  .home-links > li {
    display: block;
    margin: 0;
  }

  .home-links li + li::before {
    content: "\00a0·\00a0";
  }

  .post {
    max-inline-size: calc(var(--measure) + 2 * var(--size-3));
    margin-inline: auto;
    padding: var(--size-3);
  }

  .post > article > header {
    margin-block-end: var(--size-3);
    padding-block-start: var(--size-3);
    border-block-start: var(--title-bar) solid var(--text);
    border-block-end: var(--border-size-1) solid var(--text);
  }

  .post h1 {
    inline-size: 90%;
    margin-block-end: var(--size-2);
    padding-block-start: var(--title-gap);
    font-family: var(--font-title);
    font-size: var(--font-size-title);
    font-weight: normal;
    font-feature-settings: "case";
    letter-spacing: var(--font-letterspacing-3);
    line-height: var(--font-lineheight-0);
    text-transform: uppercase;
  }

  .post header p {
    margin-block-end: var(--size-2);
    font-feature-settings: "smcp", "c2sc", "ss01";
    text-align: end;
  }

  .post header + p {
    padding-block-start: var(--size-3);
    font-size: var(--font-size-lead);
    line-height: var(--leading-lead);
    hyphens: none;
  }

  .update {
    margin-block-start: var(--size-9);
    border-block-start: var(--border-size-2) solid var(--text);
  }

  .update > h2 {
    margin-block: var(--size-2) var(--size-3);
  }

  .post > footer {
    margin-block-start: var(--size-9);
    font-feature-settings: "smcp", "c2sc", "ss01";
  }
}