@font-face { font-family: "Cutive Mono"; font-display: swap; ascent-override: 82.86%; descent-override: 27.25%; line-gap-override: 0%; font-weight: 400; src: url("../fonts/cutive-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cutive Mono"; font-display: swap; ascent-override: 82.86%; descent-override: 27.25%; line-gap-override: 0%; font-weight: 400; src: url("../fonts/cutive-mono-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lekton"; font-display: swap; ascent-override: 75%; descent-override: 25%; line-gap-override: 0%; font-weight: 400; src: url("../fonts/lekton-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lekton"; font-display: swap; ascent-override: 75%; descent-override: 25%; line-gap-override: 0%; font-weight: 400; src: url("../fonts/lekton-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lekton"; font-display: swap; ascent-override: 75%; descent-override: 25%; line-gap-override: 0%; font-weight: 700; src: url("../fonts/lekton-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lekton"; font-display: swap; ascent-override: 75%; descent-override: 25%; line-gap-override: 0%; font-weight: 700; src: url("../fonts/lekton-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Doto"; font-display: swap; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; font-weight: 700; src: url("../fonts/doto-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Doto"; font-display: swap; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; font-weight: 700; src: url("../fonts/doto-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

@layer reset, tokens, base, layout, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; }
  html { text-size-adjust: 100%; scroll-behavior: smooth; }
  img { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; }
  ul, ol { padding: 0; }
  a { color: inherit; text-decoration: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  }
}

@layer tokens {
  :root {
    color-scheme: light dark;

    --f-text: "Cutive Mono", "Courier New", monospace;
    --f-ui: "Lekton", ui-monospace, Menlo, monospace;
    --f-title: "Doto", "Courier New", monospace;

    --t-l: 1.4rem;
    --t-m: 0.9375rem;
    --t-s: 0.8125rem;

    --pad: 1.625rem;
    --half: calc(var(--pad) / 2);
    --hair: calc(var(--pad) / 4);
    --mark: 0.5rem;
    --measure: calc(var(--pad) * 25);
    --gap: 3px;

    --body: 400 var(--t-m) / var(--pad) var(--f-text);
    --ui: 400 var(--t-s) / var(--pad) var(--f-ui);
    --head: 400 var(--t-l) / var(--pad) var(--f-text);

    --d-text: max(0px, calc(var(--pad) / 2 - var(--t-m) * 0.478 - var(--gap)));
    --d-ui: max(0px, calc(var(--pad) / 2 - var(--t-s) * 0.45 - var(--gap)));

    --bg: light-dark(oklch(0.972 0.008 100), oklch(0.16 0.01 195));
    --chart-bg: oklch(1 0 0);
    --line: light-dark(oklch(0.86 0.012 100), oklch(0.31 0.012 195));
    --line-soft: light-dark(oklch(0.9 0.01 100), oklch(0.255 0.011 195));
    --ink: light-dark(oklch(0.22 0.02 200), oklch(0.95 0.01 190));
    --ink-2: light-dark(oklch(0.4 0.02 200), oklch(0.78 0.012 190));
    --ink-3: light-dark(oklch(0.54 0.018 200), oklch(0.62 0.012 190));
    --accent: light-dark(oklch(0.5 0.11 168), oklch(0.84 0.1 165));
    --warm: light-dark(oklch(0.6 0.15 55), oklch(0.82 0.13 75));
    --cool: light-dark(oklch(0.5 0.13 250), oklch(0.78 0.1 240));
    --dot: light-dark(oklch(0.76 0.012 100), oklch(0.36 0.012 195));
    --c-s: calc(var(--t-s) * 0.12);
    --c-su: calc(var(--t-s) * 0.17);
    --c-m: calc(var(--t-m) * -0.01);
    --c-l: calc(var(--t-l) * -0.01);
    --dim: color-mix(in oklab, var(--ink) 60%, var(--bg));
    --veil: 0.62;
  }

  @media (width <= 640px) {
    :root { --t-l: 1.3rem; }
  }

  @media (prefers-contrast: more) {
    :root {
      --dot: transparent;
      --line: light-dark(oklch(0.5 0.02 100), oklch(0.7 0.02 195));
      --line-soft: var(--line);
      --ink-2: var(--ink);
      --ink-3: light-dark(oklch(0.34 0.02 200), oklch(0.86 0.012 190));
      --dim: var(--ink-3);
      --veil: 0.8;
    }
  }

  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }

  .hue { --cat: light-dark(oklch(0.5 0.12 var(--hue)), oklch(0.8 0.11 var(--hue))); }
}

@layer base {
  body {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font: var(--body);
    color: var(--ink);
    background-color: var(--bg);
    background-image: radial-gradient(circle at 0 0, var(--dot) 1px, transparent 1.6px);
    background-size: var(--pad) var(--pad);
    background-position: 0.5px 0.5px;
  }

  h1, h2 { font: var(--head); text-wrap: balance; -webkit-text-stroke: 0.4px currentColor; translate: 0 var(--c-l); }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  ::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); }

  .skip {
    position: absolute; top: calc(var(--pad) * -3); left: var(--pad); z-index: 100;
    display: inline-flex; align-items: center; height: calc(var(--pad) + 1px); padding: 0 var(--pad);
    border: 1px solid var(--ink); background: var(--bg); font: var(--ui); line-height: 1;
    &:focus-visible { top: var(--pad); }
  }

  .btn, .menu-btn, .theme button {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    height: calc(var(--pad) + 1px); margin-bottom: -1px; padding: 0 var(--pad);
    border: 1px solid var(--line); background: none; color: var(--ink-2); font: var(--ui); line-height: 1; cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
    &::after { content: ""; position: absolute; inset: -10px 0; }
    &:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }
  }
}

@layer layout {
  .page {
    --side-w: max(calc(var(--pad) * 8), round(down, calc((100% - var(--measure) - var(--pad) * 2) / 2), var(--pad)));
    flex: 1; width: min(100%, 88rem); padding: var(--pad);
    margin-left: round(down, calc((100% - min(100%, 88rem)) / 2), var(--pad));
    display: grid; grid-template-columns: var(--side-w) var(--measure) var(--side-w);
    column-gap: var(--pad); row-gap: var(--pad); align-content: start; align-items: start;
  }
  .rail { grid-column: 1; align-self: stretch; min-width: 0; }
  .page > main { grid-column: 2; min-width: 0; }
  .bio { grid-column: 3; min-width: 0; }

  @media (width < 74rem) {
    .page { grid-template-columns: minmax(0, 1fr); }
    .rail, .page > main, .bio { grid-column: 1; }
    .page > main, .bio, .head-in {
      width: min(100%, var(--measure)); justify-self: start;
      margin-left: round(down, calc((100% - min(100%, var(--measure))) / 2), var(--pad));
    }
  }

  .foot {
    display: flex; align-items: flex-end; justify-content: center; gap: var(--half);
    height: calc(var(--pad) * 3); padding: 0 var(--pad) var(--pad);
    border-top: 1px solid var(--line); background: var(--bg); color: var(--ink-3); font: var(--ui);
    a { color: var(--ink); transition: color 0.2s; &:hover { color: var(--accent); } }
    > * { padding-top: var(--d-ui); margin-bottom: calc(var(--d-ui) * -1); }
  }
}

@layer components {
  .head { padding-top: var(--pad); box-shadow: inset 0 1px 0 var(--ink); }
  .head-bar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--pad); height: var(--pad); }
  .brand { font: 700 var(--t-l) / var(--pad) var(--f-title); color: var(--ink); }
  .menu-btn { display: none; }

  .head-body { display: grid; row-gap: var(--pad); margin-top: var(--pad); min-height: 0; }
  .cats { list-style: none; }

  .row {
    display: grid; grid-template-columns: var(--mark) minmax(0, 1fr) auto; align-items: end; column-gap: var(--half);
    box-shadow: 0 1px 0 var(--line-soft);
    font: var(--ui); color: var(--ink-2); transition: color 0.2s;
    > span { white-space: nowrap; translate: 0 var(--c-s); }
    &:hover, &[aria-current="true"] { color: var(--ink); }
    &[aria-current="true"] { font-weight: 700; }
    &::before {
      content: ""; align-self: center; translate: 0 0.5px; width: var(--mark); height: var(--mark); border: 1px solid var(--cat, var(--ink-3)); transition: background-color 0.2s;
    }
    &[aria-current="true"]::before, &:hover::before { background: var(--cat, var(--ink-3)); }
  }
  .mid-s { translate: 0 var(--c-s); }
  .mid-su { translate: 0 var(--c-su); }
  .mid-m { translate: 0 var(--c-m); }
  .count { color: var(--ink-3); font-variant-numeric: tabular-nums; }

  .tools { display: grid; row-gap: var(--pad); }
  .theme {
    display: grid; grid-template-columns: repeat(3, 1fr); height: calc(var(--pad) + 1px); margin-bottom: -1px; border: 1px solid var(--line);
    button {
      height: 100%; margin: 0; padding-inline: 0; border: 0;
      & + button { box-shadow: inset 1px 0 0 var(--line); }
      &:hover, &[aria-pressed="true"] { color: var(--bg); background: var(--ink); box-shadow: none; }
    }
  }
  html:not(.js) .theme { display: none; }

  @media (width < 74rem) {
    .js .menu-btn { display: inline-flex; }
    .js .head-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 0.3s, visibility 0s 0.3s; }
    .js .head[data-open="true"] .head-panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
    .js .head-body { overflow: clip; overflow-clip-margin: 1px; margin-top: 0; > nav { margin-top: var(--pad); } }
  }

  @media (forced-colors: active) {
    body { background-image: none; }
    .row::before { forced-color-adjust: none; border-color: CanvasText; }
    .row[aria-current="true"]::before { background: CanvasText; }
    :is(.head, .row, .feed-head, .entry, .note, .more, .bio, dl, th, td, .prose > h2) { border-bottom: 1px solid CanvasText; box-shadow: none; }
  }
}