@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("/fonts/AtkinsonHyperlegibleNext-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/fonts/AtkinsonHyperlegibleMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("/fonts/AtkinsonHyperlegibleMono-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@layer reset, base, compositions, utilities, blocks, exceptions;

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

  :where(body, h1, h2, h3, p, ul, ol, figure, blockquote) {
    margin: 0;
  }

  :where(ul, ol) {
    padding: 0;
  }

  :where(img, svg) {
    display: block;
    max-inline-size: 100%;
  }
}

@layer base {
  :root {
    color-scheme: dark;
    --ink: #f4f4f5;
    --ink-soft: #b6b6bd;
    --paper: #27272a;
    --surface: rgb(9 9 11 / 0.92);
    --surface-raised: rgb(24 24 27 / 0.9);
    --line: rgb(113 113 122 / 0.7);
    --line-bright: #d4d4d8;
    --accent: #ea580c;
    --accent-bright: #fdba74;
    --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, monospace;
    --step--1: clamp(0.875rem, 0.84rem + 0.16vw, 0.96rem);
    --step-0: clamp(1.0625rem, 1.01rem + 0.24vw, 1.1875rem);
    --step-1: clamp(1.35rem, 1.19rem + 0.7vw, 1.75rem);
    --step-2: clamp(1.75rem, 1.45rem + 1.35vw, 2.5rem);
    --step-3: clamp(2.75rem, 2.05rem + 3.1vw, 4.5rem);
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: clamp(0.75rem, 0.69rem + 0.28vw, 0.9rem);
    --space-s: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);
    --space-m: clamp(1.5rem, 1.29rem + 0.9vw, 2rem);
    --space-l: clamp(2rem, 1.58rem + 1.8vw, 3rem);
    --space-xl: clamp(3rem, 2.37rem + 2.7vw, 4.5rem);
    --space-2xl: clamp(4.5rem, 3.45rem + 4.5vw, 7rem);
    --gutter: clamp(1rem, 0.45rem + 2.4vw, 2.5rem);
    --page-max: 72rem;
    --measure: 67ch;
  }

  html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    text-size-adjust: 100%;
  }

  body {
    min-block-size: 100vh;
    min-block-size: 100svh;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.6;
  }

  :where(h1, h2, h3) {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1;
    text-wrap: balance;
  }

  h1 {
    font-size: var(--step-3);
  }

  h2 {
    font-size: var(--step-2);
  }

  h3 {
    font-size: var(--step-1);
  }

  :where(p, li) {
    max-inline-size: var(--measure);
  }

  a {
    color: var(--accent-bright);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
  }

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

  :focus-visible {
    outline: 0.2rem solid var(--accent-bright);
    outline-offset: 0.22rem;
  }

  ::selection {
    background: var(--accent);
    color: #18181b;
  }
}

@layer compositions {
  .wrapper {
    inline-size: min(100% - 2 * var(--gutter), var(--page-max));
    margin-inline: auto;
  }

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

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: var(--cluster-justify, flex-start);
    gap: var(--cluster-space, var(--space-s));
  }

  .switcher {
    display: flex;
    flex-wrap: wrap;
    gap: var(--switcher-gap, var(--space-l));
  }

  .switcher > * {
    flex-grow: 1;
    flex-basis: calc((var(--switcher-threshold, 46rem) - 100%) * 999);
  }

  .project-grid {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
  }
}

@layer utilities {
  .story-date {
    color: var(--accent-bright);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .text-link {
    font-weight: 700;
  }
}

@layer blocks {
  .skip-link {
    position: fixed;
    inset-block-start: var(--space-xs);
    inset-inline-start: var(--space-xs);
    z-index: 2;
    padding: var(--space-2xs) var(--space-xs);
    background: var(--ink);
    color: var(--surface);
    font-weight: 700;
    translate: 0 -200%;
  }

  .skip-link:focus {
    translate: 0;
  }

  .site-header {
    border-block-end: 1px solid var(--line);
    background: rgb(24 24 27 / 0.92);
  }

  .site-header > .cluster {
    --cluster-justify: space-between;
    min-block-size: 4.5rem;
    padding-block: var(--space-xs);
  }

  .wordmark {
    color: var(--accent);
    font-size: var(--step-1);
    font-weight: 700;
    font-style: italic;
    letter-spacing: -0.04em;
    text-decoration: none;
  }

  .wordmark:hover {
    color: var(--accent-bright);
  }

  nav ul {
    --cluster-space: var(--space-m);
    list-style: none;
  }

  nav a {
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--step--1);
  }

  .hero-stage {
    border-block-end: 1px solid var(--line);
    background:
      linear-gradient(rgb(24 24 27 / 0.28), rgb(24 24 27 / 0.48)),
      url("/images/bg.webp") center / cover no-repeat;
  }

  .hero {
    display: grid;
    align-items: center;
    min-block-size: min(46rem, calc(100svh - 4.5rem));
    padding-block: var(--space-2xl);
  }

  .hero-panel {
    --flow-space: var(--space-m);
    max-inline-size: 52rem;
    padding: var(--space-l);
    border: 2px solid var(--line-bright);
    background: var(--surface);
    box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.35);
  }

  .hero h1 {
    max-inline-size: 13ch;
    font-size: clamp(3rem, 2rem + 4.4vw, 5.75rem);
    letter-spacing: -0.045em;
  }

  .hero h1 span {
    color: var(--accent);
  }

  .lede {
    color: var(--ink-soft);
    font-size: var(--step-1);
    line-height: 1.4;
    max-inline-size: 36ch;
  }

  .actions {
    --cluster-space: var(--space-m);
    padding-block-start: var(--space-s);
  }

  .funding {
    color: var(--ink-soft);
    font-size: var(--step--1);
  }

  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-block-size: 3rem;
    padding: 0.65rem 1rem;
    border: 2px solid var(--accent);
    background: var(--accent);
    color: #18181b;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
  }

  .button:hover {
    border-color: var(--accent-bright);
    background: var(--accent-bright);
    color: #18181b;
  }

  .section {
    --flow-space: var(--space-m);
    padding-block: var(--space-xl);
  }

  .section + .section {
    border-block-start: 2px solid var(--line);
  }

  .project-card {
    --flow-space: var(--space-s);
    display: flex;
    flex-direction: column;
    min-block-size: 16rem;
    padding: var(--space-m);
    border: 2px solid var(--line);
    background: var(--surface);
    box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.35);
  }

  .project-card > p {
    color: var(--ink-soft);
  }

  .card-link {
    margin-block-start: auto;
    font-family: var(--font-mono);
    font-size: var(--step--1);
    font-weight: 700;
  }

  .story-card {
    --switcher-threshold: 44rem;
    padding: var(--space-l);
    border: 2px solid var(--line);
    background: var(--surface-raised);
    box-shadow: 0 0.5rem 1.25rem rgb(0 0 0 / 0.35);
  }

  .story-card > * {
    --flow-space: var(--space-xs);
  }

  .story-card p:not(.story-date) {
    color: var(--ink-soft);
  }

  .story-card :is(h2, h3) a {
    color: var(--ink);
    text-decoration: none;
  }

  .page-intro {
    --flow-space: var(--space-s);
    padding-block: var(--space-2xl) var(--space-l);
  }

  .article {
    padding-block: var(--space-xl) var(--space-2xl);
  }

  .article-header,
  .prose {
    max-inline-size: var(--measure);
    margin-inline: auto;
  }

  .article-header {
    --flow-space: var(--space-m);
    padding-block-end: var(--space-xl);
  }

  .article-meta {
    --cluster-space: var(--space-s);
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--step--1);
  }

  .article-meta > * + *::before {
    content: "/";
    margin-inline-end: var(--space-s);
    color: var(--line-bright);
  }

  .back-link {
    display: inline-block;
    color: var(--ink-soft);
    font-family: var(--font-mono);
    font-size: var(--step--1);
  }

  .prose {
    --flow-space: 1.25em;
    overflow-wrap: break-word;
    color: #d4d4d8;
  }

  .prose h2 {
    --flow-space: var(--space-xl);
    padding-block-start: var(--space-xs);
  }

  .prose h2 + * {
    --flow-space: var(--space-m);
  }

  .prose :where(ul, ol) {
    padding-inline-start: 1.2em;
  }

  .prose li + li {
    margin-block-start: var(--space-xs);
  }

  .prose :where(code, pre) {
    font-family: var(--font-mono);
    font-size: var(--step--1);
  }

  .prose pre {
    max-inline-size: 100%;
    overflow-x: auto;
    padding: var(--space-s);
    border: 2px solid var(--line);
    background: var(--surface);
  }

  .not-found {
    --flow-space: var(--space-m);
    display: grid;
    align-content: center;
    justify-items: start;
    min-block-size: 65vh;
    min-block-size: 65svh;
  }
}

@layer exceptions {
  @media (forced-colors: active) {
    .project-card,
    .story-card {
      outline: 0.125rem solid transparent;
      outline-offset: -0.125rem;
      box-shadow: none;
    }

  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
}