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

@layer reset, base, composition, block, enhancement;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, p, blockquote { margin: 0; }
  img { display: block; max-inline-size: 100%; }
  button, select { font: inherit; }
}

@layer base {
  :root {
    --font-sans: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, sans-serif;
    --font-serif: Georgia, serif;
    --violet: #673abb;
    --violet-bright: #f1bfff;
    --violet-pale: #eadcff;
    --ink: #24182d;
    --muted: #6d5a78;
    --paper: #fbf9ff;
    --rule: #dfd2e8;
    --selection-background: var(--violet-pale);
    --selection-foreground: var(--ink);
    --measure: 44rem;
    --gutter: clamp(1rem, 3vw, 2.5rem);
    --space-2xs: clamp(.5rem, .45rem + .25vw, .7rem);
    --space-xs: clamp(.75rem, .65rem + .5vw, 1.1rem);
    --space-s: clamp(1rem, .85rem + .75vw, 1.5rem);
    --space-m: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
    --space-l: clamp(2.5rem, 2rem + 2.5vw, 4.25rem);
    --space-xl: clamp(4rem, 3rem + 5vw, 7.5rem);
    --step--1: clamp(.82rem, .78rem + .2vw, .95rem);
    --step-0: clamp(1rem, .94rem + .3vw, 1.2rem);
    --step-1: clamp(1.35rem, 1.15rem + 1vw, 2rem);
    --step-4: clamp(2.85rem, 2rem + 4.25vw, 5.8rem);
  }

  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: fade-out .16s ease both; }
  ::view-transition-new(root) { animation: fade-in .24s ease both; }
  @keyframes fade-out { to { opacity: 0; } }
  @keyframes fade-in { from { opacity: 0; } }

  html { scroll-behavior: smooth; scrollbar-gutter: stable; }
  body {
    min-block-size: 100svh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--step-0);
    line-height: 1.5;
  }

  a { color: inherit; text-decoration-thickness: .1em; text-underline-offset: .16em; }
  ::selection { background: var(--selection-background); color: var(--selection-foreground); }
  :focus-visible { outline: 2px solid currentColor; outline-offset: .25rem; }

  body.page-home {
    --paper: var(--violet);
    --ink: #fff;
    --muted: var(--violet-pale);
    --rule: color-mix(in srgb, white 30%, transparent);
    --selection-background: #fff;
    --selection-foreground: var(--violet);
  }

  body.page-page[data-theme='light'] { --paper: #fbf9ff; --ink: #24182d; --muted: #6d5a78; --rule: #dfd2e8; --selection-background: var(--violet); --selection-foreground: #fff; }
  body.page-page[data-theme='dark'] { --paper: #17121f; --ink: #f5efff; --muted: #b9aeca; --rule: #41334d; --selection-background: #cfa9ff; --selection-foreground: #24182d; }
  @media (prefers-color-scheme: dark) {
    body.page-page:not([data-theme='light']) { --paper: #17121f; --ink: #f5efff; --muted: #b9aeca; --rule: #41334d; --selection-background: #cfa9ff; --selection-foreground: #24182d; }
  }
}

@layer composition {
  main {
    inline-size: min(100% - (var(--gutter) * 2), 70rem);
    margin-inline: auto;
    padding-block: var(--space-l);
  }

  body.page-home main {
    display: grid;
    min-block-size: 100svh;
    align-content: center;
    padding-block: var(--space-m);
  }

  .home-page { inline-size: min(100%, 45rem); margin-inline: auto; text-align: center; }
  .home-page .intro { margin-block-end: var(--space-l); }
  .home-page .bird-mark {
    inline-size: clamp(3.75rem, 9vw, 6rem);
    block-size: auto;
    margin-inline: auto;
    margin-block-end: var(--space-m);
    filter: brightness(0) invert(1);
  }
  .essay-list { display: grid; gap: var(--space-xs); }

  .essay-page { inline-size: min(100%, var(--measure)); margin-inline: auto; }
  .not-found { display: grid; place-items: center; min-block-size: 100svh; align-content: center; gap: var(--space-s); text-align: center; }
  .not-found p { color: var(--violet-bright); font-size: var(--step--1); font-weight: 700; letter-spacing: .1em; }
  .not-found h1 { font-size: var(--step-4); letter-spacing: -.025em; }
  .not-found a { color: var(--muted); text-decoration: none; }
  .essay-body > * { max-inline-size: 100%; }
  .essay-body > * + * { margin-block-start: var(--space-m); }
}

@layer block {
  .home-page h1,
  .essay-page > h1 {
    font-size: var(--step-4);
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: .96;
  }

  .essay-card { transition: opacity .25s ease; }
  .essay-card h2 { font-size: var(--step-1); font-weight: 400; letter-spacing: -.02em; line-height: 1.15; }
  .essay-card a { display: inline-block; position: relative; padding-inline: .25em; text-decoration: none; }

  .essay-card a::before,
  .essay-card a::after,
  .home-link::before,
  .home-link::after {
    position: absolute;
    inset-block-start: 50%;
    display: block;
    color: var(--violet-bright);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .essay-card a::before,
  .home-link::before { content: '['; inset-inline-end: 100%; margin-inline-end: .35em; transform: translate(.35em, -50%); }
  .essay-card a::after,
  .home-link::after { content: ']'; inset-inline-start: 100%; margin-inline-start: .35em; transform: translate(-.35em, -50%); }
  .essay-card a:hover::before,
  .essay-card a:focus-visible::before,
  .essay-card a:hover::after,
  .essay-card a:focus-visible::after,
  .home-link:hover::before,
  .home-link:focus-visible::before,
  .home-link:hover::after,
  .home-link:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
  .essay-card a:focus-visible,
  .home-link:focus-visible { outline: 0; }

  .essay-list:has(a:hover) .essay-card,
  .essay-list:has(a:focus-visible) .essay-card { opacity: .3; }
  .essay-list .essay-card:has(a:hover),
  .essay-list .essay-card:has(a:focus-visible) { opacity: 1; }

  .home-link {
    display: block;
    position: relative;
    inline-size: max-content;
    margin-inline: auto;
    margin-block-end: var(--space-l);
    color: var(--muted);
    font-size: var(--step--1);
    text-decoration: none;
    transition: color .2s ease;
  }
  .home-link:hover, .home-link:focus-visible { color: var(--violet); }
  .essay-page:has(.home-link:hover) .essay-body,
  .essay-page:has(.home-link:focus-visible) .essay-body { opacity: .28; }

  .essay-page > h1 { margin-block-end: var(--space-xl); text-align: center; }
  .essay-body { font-size: var(--step-0); line-height: 1.75; transition: opacity .25s ease; }
  .essay-body h2 { font-size: var(--step-1); line-height: 1.15; }
  .essay-body h3 { font-size: var(--step-0); line-height: 1.3; }
  .essay-body h3 + p { color: var(--muted); font-size: var(--step--1); margin-block-start: var(--space-2xs); }
  .essay-body h4 { font-size: var(--step--1); line-height: 1.3; }
  .essay-body h4 + p { color: var(--muted); font-size: var(--step--1); margin-block-start: var(--space-2xs); }
  .essay-body ul { padding-inline-start: var(--space-s); }
  .essay-body li + li { margin-block-start: var(--space-2xs); }
  .essay-body blockquote {
    border-inline-start: 1px solid var(--rule);
    color: var(--muted);
    font-size: var(--step-0);
    font-style: italic;
    line-height: 1.65;
    padding-inline-start: var(--space-s);
  }
  .essay-body pre {
    overflow-x: auto;
    border-inline-start: .22rem solid var(--rule);
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--step--1);
    line-height: 1.55;
    padding-inline-start: var(--space-s);
    white-space: pre-wrap;
  }

  .table-of-contents {
    margin-block: calc(var(--space-xl) * -0.45) var(--space-xl);
    color: var(--muted);
    font-size: var(--step--1);
    line-height: 1.45;
  }
  .table-of-contents ul { margin: 0; padding: 0; list-style: none; }
  .table-of-contents > ul { columns: 17rem 2; column-gap: var(--space-l); }
  .table-of-contents li { break-inside: avoid; }
  .toc-group + .toc-group { margin-block-start: var(--space-s); }
  .toc-section { font-weight: 700; }
  .toc-children { margin-block-start: var(--space-2xs) !important; }
  .toc-children li + li { margin-block-start: var(--space-2xs); }
  .toc-grandchildren { margin-block: var(--space-2xs) 0 !important; padding-inline-start: var(--space-s) !important; }
  .toc-grandchildren li + li { margin-block-start: var(--space-2xs); }
  .table-of-contents a { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
  .table-of-contents a:hover { color: var(--violet); }

  .table-of-contents a,
  .essay-body a {
    display: inline-block;
    position: relative;
    color: inherit;
    text-decoration: none;
  }
  .table-of-contents a::before,
  .table-of-contents a::after,
  .essay-body a::before,
  .essay-body a::after {
    position: absolute;
    inset-block-start: 50%;
    display: block;
    color: var(--violet);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .table-of-contents a::before,
  .essay-body a::before { content: '['; inset-inline-end: 100%; margin-inline-end: .3em; transform: translate(.3em, -50%); }
  .table-of-contents a::after,
  .essay-body a::after { content: ']'; inset-inline-start: 100%; margin-inline-start: .3em; transform: translate(-.3em, -50%); }
  .table-of-contents a:hover::before,
  .table-of-contents a:focus-visible::before,
  .table-of-contents a:hover::after,
  .table-of-contents a:focus-visible::after,
  .essay-body a:hover::before,
  .essay-body a:focus-visible::before,
  .essay-body a:hover::after,
  .essay-body a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
  .table-of-contents a:hover,
  .table-of-contents a:focus-visible,
  .essay-body a:hover,
  .essay-body a:focus-visible { color: var(--violet); outline: 0; }

  .table-of-contents li,
  .essay-body > * { transition: opacity .25s ease; }
  .table-of-contents:has(a:hover) li,
  .table-of-contents:has(a:focus-visible) li { opacity: .3; }
  .table-of-contents li:has(a:hover),
  .table-of-contents li:has(a:focus-visible) { opacity: 1; }
  .essay-body:has(a:hover) > *,
  .essay-body:has(a:focus-visible) > * { opacity: .28; }
  .essay-body > *:has(a:hover),
  .essay-body > *:has(a:focus-visible) { opacity: 1; }

  .theme-control {
    position: fixed;
    inset-inline-end: var(--gutter);
    inset-block-end: var(--space-s);
    display: none;
    align-items: baseline;
    gap: var(--space-2xs);
    color: var(--muted);
    font-size: var(--step--1);
    opacity: .72;
  }
  body.page-page .theme-control { display: flex; }
  .theme-control:hover, .theme-control:focus-within { opacity: 1; }
  .theme-control select {
    border: 0;
    border-block-end: 1px solid var(--rule);
    border-radius: 0;
    background: transparent;
    color: inherit;
    padding: .1em;
  }

  @media (max-width: 40rem) {
    .theme-control { position: static; justify-content: center; margin-block: 0 var(--space-l); }
  }
}

@layer enhancement {
  body.page-page,
  body.page-page select,
  body.page-page .essay-body blockquote { transition: background-color .28s ease, color .28s ease, border-color .28s ease; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}