/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;
    --spacing: .25rem;
    --ease-out: cubic-bezier(0, 0, .2, 1);
  }
}

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

  * {
    margin: 0;
  }

  html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
  }

  img, svg, video {
    max-inline-size: 100%;
    display: block;
  }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  ol[role="list"], ul[role="list"] {
    padding: 0;
    list-style: none;
  }
}

@layer tokens {
  :root {
    color-scheme: light dark;
    --paper: light-dark(oklch(95.5% .014 85), oklch(17% .008 70));
    --paper-2: light-dark(oklch(92% .018 82), oklch(21% .01 70));
    --ink: light-dark(oklch(19% .015 60), oklch(93% .012 85));
    --ink-2: light-dark(oklch(42% .015 60), oklch(72% .012 80));
    --rule: light-dark(oklch(19% .015 60 / .85), oklch(93% .012 85 / .7));
    --hair: light-dark(oklch(19% .015 60 / .16), oklch(93% .012 85 / .16));
    --signal: light-dark(oklch(62% .215 35), oklch(70% .19 38));
    --moss: oklch(44% .075 155);
    --cobalt: oklch(47% .19 264);
    --ochre: oklch(78% .14 80);
    --plum: oklch(42% .11 345);
    --sky: oklch(78% .07 230);
    --clay: oklch(62% .12 45);
    --font-display: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
    --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    --step--1: clamp(.8rem, .78rem + .1vw, .86rem);
    --step-0: clamp(1rem, .96rem + .2vw, 1.1rem);
    --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
    --step-2: clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
    --step-3: clamp(2rem, 1.5rem + 2.2vw, 3.2rem);
    --step-4: clamp(2.6rem, 1.6rem + 4.2vw, 5.4rem);
    --gutter: clamp(1rem, .5rem + 3vw, 3rem);
    --max: 92rem;
    --ease-out: cubic-bezier(.2, .7, .1, 1);
  }

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

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

  @property --animation-reduced {
    syntax: "*";
    inherits: false;
    initial-value: none;
  }
}

@layer base {
  html {
    background: var(--paper);
    color: var(--ink);
    scroll-behavior: smooth;
    scroll-padding-block-start: 5rem;
    overflow-x: clip;
  }

  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    min-block-size: 100dvh;
    line-height: 1.55;
    overflow-x: clip;
  }

  body:before {
    content: "";
    z-index: 100;
    pointer-events: none;
    opacity: .1;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    position: fixed;
    inset: 0;
  }

  :root[data-theme="dark"] body:before {
    mix-blend-mode: screen;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body:before {
      mix-blend-mode: screen;
    }
  }

  ::selection {
    background: var(--signal);
    color: var(--paper);
  }

  a {
    color: inherit;
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
  }

  :focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
    border-radius: 2px;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -.02em;
    text-wrap: balance;
    font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
    font-weight: 400;
    line-height: 1.02;
  }

  p {
    text-wrap: pretty;
  }

  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *, :before, :after {
      animation: var(--animation-reduced) !important;
    }

    html {
      scroll-behavior: auto;
    }
  }
}

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

  .section {
    padding-block: clamp(4rem, 3rem + 6vw, 9rem);
  }

  .section-head {
    border-block-end: 1.5px solid var(--rule);
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 1rem 2rem;
    margin-block-end: clamp(2rem, 1rem + 3vw, 4rem);
    padding-block-end: 1rem;
    display: grid;
  }

  .section-head h2 {
    font-size: var(--step-4);
  }

  .section-head h2 em {
    color: var(--signal);
    font-style: italic;
  }

  .section-head .count {
    justify-self: end;
  }

  .section-head p {
    max-inline-size: 52ch;
    color: var(--ink-2);
    grid-column: 1 / -1;
  }

  @media not all and (min-width: 48rem) {
    .section-head {
      grid-template-columns: 1fr;
    }

    .section-head .count {
      justify-self: start;
    }
  }
}

@layer components {
  .mono {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: .02em;
    text-transform: uppercase;
    font-weight: 500;
  }

  .muted {
    color: var(--ink-2);
  }

  .masthead {
    z-index: 50;
    background: var(--paper);
    position: sticky;
    inset-block-start: 0;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .masthead {
      background: color-mix(in oklab, var(--paper) 88%, transparent);
    }
  }

  .masthead {
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    border-block-end: 1px solid var(--hair);
    view-transition-name: masthead;
  }

  .masthead .wrap {
    align-items: center;
    gap: 1.5rem;
    min-block-size: 3.5rem;
    display: flex;
  }

  .wordmark {
    font-family: var(--font-display);
    letter-spacing: -.03em;
    font-variation-settings: "opsz" 72, "SOFT" 100, "WONK" 1;
    align-items: baseline;
    gap: .5rem;
    font-size: 1.45rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
  }

  .wordmark i {
    color: var(--signal);
    font-weight: 500;
  }

  .wordmark small {
    font-family: var(--font-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-2);
    font-size: .68rem;
    font-weight: 400;
  }

  .nav {
    gap: clamp(.75rem, 2vw, 2rem);
    margin-inline-start: auto;
    display: flex;
  }

  .nav a {
    padding-block: .4rem;
    text-decoration: none;
    position: relative;
  }

  .nav a:after {
    content: "";
    transform-origin: 100%;
    block-size: 1.5px;
    transition: scale .35s var(--ease-out);
    background: currentColor;
    position: absolute;
    inset-block-end: .15rem;
    inset-inline: 0;
    scale: 0 1;
  }

  .nav a:hover:after, .nav a[aria-current="page"]:after {
    transform-origin: 0;
    scale: 1;
  }

  .masthead-meta {
    border-inline-start: 1px solid var(--hair);
    align-items: center;
    gap: 1rem;
    padding-inline-start: 1.5rem;
    display: flex;
  }

  .theme-toggle {
    aspect-ratio: 1;
    border: 1px solid var(--hair);
    inline-size: 2.25rem;
    transition: border-color .2s, rotate .6s var(--ease-out);
    border-radius: 50%;
    place-items: center;
    display: grid;
  }

  .theme-toggle:hover {
    border-color: var(--ink);
    rotate: 180deg;
  }

  .theme-toggle svg {
    inline-size: 1rem;
  }

  @media not all and (min-width: 60rem) {
    .masthead .clock {
      display: none;
    }
  }

  @media not all and (min-width: 40rem) {
    .wordmark small {
      display: none;
    }

    .nav {
      gap: .9rem;
      font-size: .92rem;
    }

    .masthead-meta {
      padding-inline-start: .75rem;
    }
  }

  .hero {
    padding-block: clamp(2.5rem, 1rem + 5vw, 6rem) 0;
    position: relative;
  }

  .hero-top {
    grid-template-columns: repeat(12, 1fr);
    align-items: start;
    gap: 1.5rem;
    display: grid;
  }

  .hero-kicker {
    border-block-start: 1.5px solid var(--rule);
    grid-column: 1 / span 3;
    gap: .35rem;
    padding-block-start: .6rem;
    display: grid;
  }

  .hero-statement {
    font-family: var(--font-display);
    font-size: var(--step-3);
    letter-spacing: -.022em;
    font-variation-settings: "opsz" 96, "SOFT" 50;
    text-wrap: balance;
    grid-column: 4 / span 6;
    line-height: 1.08;
  }

  .hero-statement em {
    font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
    font-style: italic;
  }

  .hero-statement .hl {
    white-space: nowrap;
    position: relative;
  }

  .hero-statement .hl svg {
    block-size: .4em;
    inline-size: 108%;
    color: var(--signal);
    position: absolute;
    inset-block-end: -.18em;
    inset-inline: -4%;
    overflow: visible;
  }

  .hero-statement .hl path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1px;
    animation: draw 1.1s .6s var(--ease-out) forwards;
    --animation-reduced: draw 0s forwards;
  }

  @keyframes draw {
    to {
      stroke-dashoffset: 0;
    }
  }

  .status-card {
    border: 1.5px solid var(--rule);
    background: var(--paper);
    box-shadow: 4px 4px 0 var(--ink);
    transition: rotate .4s var(--ease-out);
    grid-column: 10 / span 3;
    gap: .75rem;
    padding: 1rem 1.1rem 1.1rem;
    display: grid;
    rotate: 1.5deg;
  }

  .status-card:hover {
    rotate: 0deg;
  }

  .status-card p {
    font-size: .95rem;
    line-height: 1.45;
  }

  .status-card a {
    font-weight: 600;
  }

  .pulse {
    align-items: center;
    gap: .5rem;
    display: inline-flex;
  }

  .pulse:before {
    content: "";
    aspect-ratio: 1;
    background: oklch(70% .18 145);
    border-radius: 50%;
    inline-size: .55rem;
    animation: 2.2s infinite pulse-ring;
    box-shadow: 0 0 oklch(70% .18 145 / .6);
  }

  @keyframes pulse-ring {
    70% {
      box-shadow: 0 0 0 .6rem oklch(70% .18 145 / 0);
    }

    100% {
      box-shadow: 0 0 oklch(70% .18 145 / 0);
    }
  }

  .specimen {
    margin-block-start: clamp(2rem, 1rem + 4vw, 5rem);
    position: relative;
    container-type: inline-size;
  }

  .specimen-word {
    font-family: var(--font-display);
    letter-spacing: -.065em;
    font-variation-settings: "opsz" 144, "SOFT" 0, "WONK" 1;
    -webkit-user-select: none;
    user-select: none;
    margin-inline-start: -.04em;
    font-size: 57cqi;
    font-weight: 800;
    line-height: .74;
    display: block;
  }

  .specimen-word span {
    transition: font-variation-settings .5s var(--ease-out), font-weight .5s var(--ease-out), translate .5s var(--ease-out);
    display: inline-block;
  }

  .specimen-word span:hover {
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-weight: 300;
    translate: 0 -.03em;
  }

  .specimen-word .c {
    color: var(--signal);
    font-style: italic;
    font-weight: 500;
  }

  .specimen-notes {
    pointer-events: none;
    position: absolute;
    inset: 0;
  }

  .specimen-notes .note {
    white-space: nowrap;
    color: var(--ink-2);
    align-items: center;
    gap: .5rem;
    display: flex;
    position: absolute;
  }

  .specimen-notes .note:before {
    content: "";
    border-block-start: 1px solid;
    inline-size: 3.5rem;
  }

  .specimen-notes .n1 {
    flex-direction: row-reverse;
    inset-block-start: 10%;
    inset-inline-end: 0;
  }

  .specimen-notes .n2 {
    flex-direction: row-reverse;
    inset-block-start: 22%;
    inset-inline-end: 0;
  }

  @media not all and (min-width: 60rem) {
    .hero-kicker {
      grid-column: 1 / -1;
      grid-template-columns: repeat(3, auto);
      justify-content: space-between;
    }

    .hero-statement {
      grid-column: 1 / -1;
    }

    .status-card {
      grid-column: 1 / -1;
      max-inline-size: 26rem;
      rotate: 0deg;
    }

    .specimen-notes {
      display: none;
    }
  }

  .ticker {
    border-block: 1.5px solid var(--rule);
    background: var(--ink);
    color: var(--paper);
    margin-block-start: clamp(1.5rem, 3vw, 3rem);
    margin-inline: -1rem;
    display: flex;
    overflow: hidden;
    rotate: -.6deg;
  }

  .ticker:hover .ticker-track {
    animation-play-state: paused;
  }

  .ticker-track {
    --animation-reduced: none;
    flex-shrink: 0;
    gap: 2.5rem;
    padding: .85rem 1.25rem;
    padding-inline-end: 2.5rem;
    animation: 40s linear infinite ticker;
    display: flex;
  }

  .ticker-track span {
    white-space: nowrap;
    align-items: center;
    gap: 2.5rem;
    display: inline-flex;
  }

  .ticker-track span:after {
    content: "✺" / "";
    color: var(--signal);
  }

  .ticker-track b {
    color: var(--signal);
    margin-inline-end: .5rem;
    font-weight: 500;
  }

  @keyframes ticker {
    to {
      translate: -100%;
    }
  }

  .plates {
    gap: clamp(4rem, 3rem + 5vw, 8rem);
    display: grid;
  }

  .plate {
    --plate: var(--moss);
    --plate-ink: oklch(97% .01 90);
    grid-template-columns: repeat(12, 1fr);
    gap: 0 clamp(1.5rem, 3vw, 3rem);
    display: grid;
  }

  .plate-head {
    border-block-start: 1.5px solid var(--rule);
    flex-wrap: wrap;
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: .5rem 2rem;
    margin-block-end: 1.5rem;
    padding-block: .6rem;
    display: flex;
  }

  .plate-head .no, :root[data-theme="dark"] .plate-head .no {
    color: var(--plate);
  }

  @supports (color: color-mix(in lab, red, red)) {
    :root[data-theme="dark"] .plate-head .no {
      color: color-mix(in oklch, var(--plate), white 35%);
    }
  }

  .plate-art {
    aspect-ratio: 5 / 4;
    background: var(--plate);
    color: var(--plate-ink);
    isolation: isolate;
    border-radius: 2px;
    grid-column: 1 / span 7;
    position: relative;
    overflow: hidden;
  }

  .plate-copy {
    flex-direction: column;
    grid-column: 8 / -1;
    gap: 1.5rem;
    display: flex;
  }

  .plate-copy h3 {
    font-size: var(--step-4);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-weight: 400;
  }

  .plate-copy h3 em {
    font-style: italic;
  }

  .plate-copy .lede {
    font-size: var(--step-1);
    line-height: 1.4;
  }

  .plate-copy > p:not(.lede) {
    color: var(--ink-2);
  }

  .plate.flip .plate-art {
    grid-area: 2 / 6 / auto / -1;
  }

  .plate.flip .plate-copy {
    grid-area: 2 / 1 / auto / span 5;
  }

  @media not all and (min-width: 60rem) {
    .plate .plate-art, .plate.flip .plate-art {
      grid-area: auto / 1 / auto / -1;
    }

    .plate .plate-copy, .plate.flip .plate-copy {
      grid-area: auto / 1 / auto / -1;
      margin-block-start: 2rem;
    }
  }

  .spec {
    border-block-start: 1px solid var(--hair);
    grid-template-columns: max-content 1fr;
    display: grid;
  }

  .spec dt, .spec dd {
    border-block-end: 1px solid var(--hair);
    padding-block: .55rem;
  }

  .spec dt {
    color: var(--ink-2);
    padding-inline-end: 2rem;
  }

  .actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-block-start: auto;
    display: flex;
  }

  .btn {
    background: var(--ink);
    color: var(--paper);
    transition: background .25s, translate .25s var(--ease-out), box-shadow .25s var(--ease-out);
    border-radius: 999px;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.2rem;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
  }

  .btn:hover {
    background: var(--plate, var(--signal));
    box-shadow: 0 6px 0 -1px var(--ink);
    translate: 0 -2px;
  }

  .btn .arrow {
    transition: translate .3s var(--ease-out);
  }

  .btn:hover .arrow {
    translate: 3px;
  }

  .link-quiet {
    -webkit-text-decoration-color: var(--hair);
    -webkit-text-decoration-color: var(--hair);
    text-decoration-color: var(--hair);
    font-weight: 500;
    transition: text-decoration-color .2s;
  }

  .link-quiet:hover {
    text-decoration-color: currentColor;
  }

  .art-tide .waves {
    opacity: .55;
    block-size: 62%;
    inline-size: 120%;
    max-inline-size: none;
    position: absolute;
    inset: auto -10% -6%;
  }

  .art-tide .waves g {
    --animation-reduced: none;
    animation: 14s linear infinite drift;
  }

  .art-tide .waves g:nth-child(2) {
    opacity: .6;
    animation-duration: 22s;
    animation-direction: reverse;
  }

  .art-tide .sun {
    aspect-ratio: 1;
    background: var(--ochre);
    mix-blend-mode: screen;
    opacity: .9;
    border-radius: 50%;
    inline-size: 18%;
    position: absolute;
    inset-block-start: 12%;
    inset-inline-end: 12%;
  }

  @keyframes drift {
    to {
      translate: -400px;
    }
  }

  .window {
    color: oklch(22% .02 160);
    inline-size: 52%;
    transition: rotate .6s var(--ease-out), translate .6s var(--ease-out);
    background: oklch(98% .01 90);
    border-radius: 10px;
    padding: .6rem .75rem 1.25rem;
    position: absolute;
    inset-block-start: 14%;
    inset-inline-start: 10%;
    rotate: -3deg;
    box-shadow: inset 0 1px oklch(100% 0 0 / .5), 0 2px 4px oklch(15% .03 160 / .15), 0 18px 40px -10px oklch(15% .05 160 / .45);
    container-type: inline-size;
  }

  .plate:hover .window {
    translate: 0 -6px;
    rotate: -1deg;
  }

  .window .lights {
    gap: .3rem;
    margin-block-end: 1rem;
    display: flex;
  }

  .window .lights i {
    aspect-ratio: 1;
    background: oklch(80% .02 90);
    border-radius: 50%;
    inline-size: .55rem;
  }

  .window .lights i:first-child {
    background: oklch(68% .18 28);
  }

  .window .time {
    font-family: var(--font-display);
    letter-spacing: -.04em;
    font-variant-numeric: tabular-nums;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    font-size: 24cqi;
    font-weight: 300;
    line-height: .9;
  }

  .window .label {
    color: oklch(45% .03 160);
    margin-block-start: .5rem;
    font-size: .62rem;
  }

  .window .bar {
    background: linear-gradient(to right, var(--moss) 62%, oklch(90% .01 90) 0);
    border-radius: 4px;
    block-size: 4px;
    margin-block-start: .9rem;
  }

  .art-kiln {
    background: radial-gradient(circle at 80% 110%, oklch(70% .2 50 / .55), transparent 55%), repeating-linear-gradient(-45deg, oklch(100% 0 0 / .04) 0 1px, transparent 0 14px), var(--plate);
    place-items: center;
    display: grid;
  }

  .terminal {
    color: oklch(88% .02 250);
    inline-size: 82%;
    font-family: var(--font-mono);
    transition: rotate .6s var(--ease-out);
    background: oklch(17% .02 265);
    border-radius: 10px;
    font-size: clamp(.66rem, .5rem + .55vw, .92rem);
    line-height: 1.75;
    overflow: hidden;
    rotate: 2deg;
    box-shadow: 0 30px 60px -20px oklch(10% .05 265 / .7), inset 0 0 0 1px oklch(100% 0 0 / .08);
  }

  .plate:hover .terminal {
    rotate: 0deg;
  }

  .terminal .bar {
    color: oklch(60% .02 250);
    border-block-end: 1px solid oklch(100% 0 0 / .08);
    align-items: center;
    gap: .35rem;
    padding: .6rem .8rem;
    font-size: .85em;
    display: flex;
  }

  .terminal .bar i {
    aspect-ratio: 1;
    background: oklch(35% .02 265);
    border-radius: 50%;
    inline-size: .55rem;
  }

  .terminal .bar span {
    margin-inline-start: auto;
  }

  .terminal pre {
    font: inherit;
    white-space: pre-wrap;
    margin: 0;
    padding: 1rem 1.1rem 1.25rem;
  }

  .terminal .ln {
    display: block;
  }

  .terminal .p {
    color: var(--ochre);
  }

  .terminal .ok {
    color: oklch(78% .16 150);
  }

  .terminal .dim {
    color: oklch(58% .02 250);
  }

  .terminal .hot {
    color: oklch(75% .17 45);
  }

  .terminal .cursor {
    vertical-align: text-bottom;
    background: currentColor;
    block-size: 1.1em;
    inline-size: .6em;
    animation: 1s step-end infinite blink;
    display: inline-block;
  }

  @keyframes blink {
    50% {
      opacity: 0;
    }
  }

  :root.js .terminal .ln {
    opacity: 0;
    translate: 0 4px;
  }

  :root.js .terminal.is-running .ln {
    animation: line-in .35s var(--ease-out) forwards;
    animation-delay: calc(var(--i) * .42s);
    --animation-reduced: line-in 0s forwards;
  }

  @keyframes line-in {
    to {
      opacity: 1;
      translate: 0;
    }
  }

  .plate-caption {
    opacity: .75;
    z-index: 2;
    font-size: .68rem;
    position: absolute;
    inset-block-end: .9rem;
    inset-inline-start: 1rem;
  }

  .works {
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 2vw, 1.5rem);
    display: grid;
  }

  .work {
    --tint: var(--plum);
    border: 1.5px solid var(--rule);
    background: var(--paper);
    transition: translate .35s var(--ease-out), box-shadow .35s var(--ease-out);
    grid-template-rows: auto 1fr auto;
    gap: 1.25rem;
    padding: 1.25rem;
    text-decoration: none;
    display: grid;
    position: relative;
  }

  .work:hover {
    box-shadow: 8px 8px 0 var(--tint);
    translate: -4px -4px;
  }

  .work:first-child {
    grid-column: span 7;
  }

  .work:nth-child(2), .work:nth-child(3) {
    grid-column: span 5;
  }

  .work:nth-child(4) {
    grid-column: span 7;
  }

  .work .work-top {
    justify-content: space-between;
    align-items: start;
    gap: 1rem;
    display: flex;
  }

  .work h3 {
    font-size: var(--step-3);
  }

  .work h3 em {
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-style: italic;
  }

  .work p {
    color: var(--ink-2);
    max-inline-size: 46ch;
    margin-block-start: .75rem;
  }

  .work .work-foot {
    border-block-start: 1px solid var(--hair);
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem;
    padding-block-start: .85rem;
    display: flex;
  }

  .work .go {
    transition: translate .3s var(--ease-out);
  }

  .work:hover .go {
    translate: 4px;
  }

  @media not all and (min-width: 52rem) {
    .work:nth-child(n) {
      grid-column: 1 / -1;
    }
  }

  .tags {
    flex-wrap: wrap;
    gap: .4rem;
    display: flex;
  }

  .tag {
    border: 1px solid var(--hair);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-radius: 999px;
    padding: .15rem .5rem;
    font-size: .7rem;
  }

  .sigil {
    --c1: var(--tint);
    --c2: var(--paper);
    aspect-ratio: 1;
    border: 1.5px solid var(--rule);
    inline-size: 4.5rem;
    transition: rotate .6s var(--ease-out), border-radius .6s var(--ease-out);
    flex-shrink: 0;
  }

  .work:hover .sigil {
    border-radius: 50%;
    rotate: 90deg;
  }

  .sigil.stripes {
    background: repeating-linear-gradient(-45deg, var(--c1) 0 .45rem, var(--c2) 0 .9rem);
  }

  .sigil.checker {
    background: repeating-conic-gradient(var(--c1) 0 25%, var(--c2) 0 50%) 0 / 1.1rem 1.1rem;
  }

  .sigil.dots {
    --polka: radial-gradient(circle, var(--c1) .28rem, transparent calc(.28rem + 1px));
    background: var(--polka) 0 0, var(--polka) .55rem .55rem var(--c2);
    background-size: 1.1rem 1.1rem;
  }

  .sigil.rings {
    background: repeating-radial-gradient(circle at 100% 100%, var(--c1) 0 .35rem, var(--c2) 0 .7rem);
  }

  .index {
    counter-reset: idx;
    margin-block-start: calc(-1 * clamp(2rem, 1rem + 3vw, 4rem));
  }

  .index-row {
    counter-increment: idx;
  }

  .index-row a {
    border-block-end: 1px solid var(--hair);
    isolation: isolate;
    transition: color .25s, padding .35s var(--ease-out);
    grid-template-columns: 3.5rem minmax(10rem, 1.1fr) 2fr 9rem 4rem 1.5rem;
    align-items: baseline;
    gap: 1rem;
    padding: 1.1rem .5rem;
    text-decoration: none;
    display: grid;
    position: relative;
  }

  .index-row a:before {
    content: "";
    z-index: -1;
    background: var(--ink);
    transform-origin: bottom;
    transition: scale .35s var(--ease-out);
    position: absolute;
    inset: 0;
    scale: 1 0;
  }

  .index-row a:hover, .index-row a:focus-visible {
    color: var(--paper);
    padding-inline: 1.25rem;
  }

  .index-row a:hover:before, .index-row a:focus-visible:before {
    scale: 1;
  }

  .index-row a:hover .muted {
    color: var(--paper);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .index-row a:hover .muted {
      color: color-mix(in oklab, var(--paper) 70%, transparent);
    }
  }

  .index-row .num:before {
    content: counter(idx, decimal-leading-zero);
  }

  .index-row .name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-variation-settings: "opsz" 48, "SOFT" 50;
  }

  .index-row .arr {
    transition: rotate .3s var(--ease-out);
    justify-self: end;
  }

  .index-row a:hover .arr {
    color: var(--signal);
    rotate: -45deg;
  }

  @media not all and (min-width: 52rem) {
    .index-row a {
      grid-template-columns: 2.5rem 1fr 1.5rem;
    }

    .index-row a .desc {
      grid-area: 2 / 2 / auto / -1;
    }

    .index-row a .kind, .index-row a .year {
      display: none;
    }

    .index-row a .arr {
      grid-area: 1 / 3;
    }
  }

  .notes-grid {
    grid-template-columns: 1fr 2fr;
    gap: clamp(2rem, 5vw, 6rem);
    display: grid;
  }

  .notes-grid aside {
    align-content: start;
    gap: 1.25rem;
    display: grid;
  }

  .notes-grid aside p {
    color: var(--ink-2);
    max-inline-size: 34ch;
  }

  @media not all and (min-width: 52rem) {
    .notes-grid {
      grid-template-columns: 1fr;
    }
  }

  .note-list {
    border-block-start: 1.5px solid var(--rule);
  }

  .notes-grid .note-list {
    border-block-start: 0;
    margin-block-start: -1.4rem;
  }

  .note-item a {
    border-block-end: 1px solid var(--hair);
    grid-template-columns: 7rem 1fr auto;
    align-items: baseline;
    gap: 1.5rem;
    padding-block: 1.4rem;
    text-decoration: none;
    display: grid;
  }

  .note-item a h3 {
    font-size: var(--step-2);
    transition: color .2s, translate .35s var(--ease-out);
  }

  .note-item a p {
    color: var(--ink-2);
    grid-column: 2;
    margin-block-start: -.75rem;
  }

  .note-item a:hover h3 {
    color: var(--signal);
    translate: .4rem;
  }

  @media not all and (min-width: 40rem) {
    .note-item a {
      grid-template-columns: 1fr;
      gap: .5rem;
    }

    .note-item a p {
      grid-column: 1;
      margin: 0;
    }
  }

  .about {
    grid-template-columns: repeat(12, 1fr);
    gap: 2rem clamp(1.5rem, 3vw, 3rem);
    display: grid;
  }

  .about .about-lede {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-variation-settings: "opsz" 72, "SOFT" 50;
    grid-column: 1 / span 7;
    line-height: 1.25;
  }

  .about .about-lede em {
    color: var(--signal);
    font-style: italic;
  }

  .about .about-body {
    color: var(--ink-2);
    grid-column: 1 / span 6;
    gap: 1rem;
    display: grid;
  }

  .about .principles {
    grid-area: 1 / 8 / span 2 / -1;
  }

  @media not all and (min-width: 60rem) {
    .about > * {
      grid-area: auto / 1 / auto / -1 !important;
    }
  }

  .principles {
    border: 1.5px solid var(--rule);
    background: var(--paper-2);
    align-self: start;
    padding: 1.25rem;
  }

  .principles ol {
    counter-reset: p;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .principles li {
    counter-increment: p;
    border-block-end: 1px solid var(--hair);
    grid-template-columns: 2.25rem 1fr;
    padding-block: .8rem;
    display: grid;
  }

  .principles li:last-child {
    border: 0;
    padding-block-end: 0;
  }

  .principles li:before {
    content: counter(p, upper-roman) ".";
    font-family: var(--font-display);
    color: var(--signal);
    font-style: italic;
  }

  .principles strong {
    font-weight: 600;
    display: block;
  }

  .principles span {
    color: var(--ink-2);
    font-size: .95rem;
  }

  .contact {
    background: var(--ink);
    color: var(--paper);
    padding-block: clamp(4rem, 3rem + 6vw, 9rem);
    position: relative;
    overflow: hidden;
  }

  .contact .wrap {
    gap: 2rem;
    display: grid;
  }

  .contact .big {
    font-family: var(--font-display);
    letter-spacing: -.045em;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    overflow-wrap: anywhere;
    font-size: clamp(2.5rem, 1rem + 8vw, 9.5rem);
    font-weight: 400;
    line-height: .92;
    text-decoration: none;
    display: inline-block;
  }

  .contact .big .u {
    background: linear-gradient(var(--signal), var(--signal)) 0 92% / 0% .08em no-repeat;
    transition: background-size .6s var(--ease-out);
  }

  .contact .big:hover .u, .contact .big:focus-visible .u {
    background-size: 100% .08em;
  }

  .contact .big em {
    color: var(--signal);
    font-style: italic;
  }

  .contact .row {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 3rem;
    display: flex;
  }

  .contact .socials {
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    display: flex;
  }

  .contact .socials a {
    text-decoration: none;
  }

  .contact .socials a:hover {
    color: var(--signal);
  }

  .stamp {
    inline-size: clamp(7rem, 13vw, 10.5rem);
    color: var(--signal);
    --animation-reduced: none;
    animation: 30s linear infinite stamp-spin;
    position: absolute;
    inset-block-start: clamp(1.5rem, 4vw, 3rem);
    inset-inline-end: var(--gutter);
  }

  @keyframes stamp-spin {
    to {
      rotate: 1turn;
    }
  }

  @media not all and (min-width: 40rem) {
    .stamp {
      display: none;
    }
  }

  .footer {
    border-block-start: 1px solid var(--hair);
    padding-block: 1.5rem 2rem;
  }

  .footer .wrap {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem 2rem;
    display: flex;
  }

  .footer a {
    text-decoration: none;
  }

  .footer a:hover {
    color: var(--signal);
  }

  :root.js .reveal {
    opacity: 0;
    transition: opacity .9s var(--ease-out), translate .9s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms);
    translate: 0 1.5rem;
  }

  :root.js .reveal.is-in {
    opacity: 1;
    translate: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    :root.js .reveal {
      opacity: 1;
      transition: none;
      translate: none;
    }
  }

  .page-hero {
    padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2rem, 4vw, 4rem);
  }

  .page-hero h1 {
    letter-spacing: -.055em;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    font-size: clamp(3.5rem, 1rem + 12vw, 12rem);
    line-height: .85;
  }

  .page-hero h1 em {
    color: var(--signal);
    font-style: italic;
  }

  .page-hero .page-hero-meta {
    border-block-start: 1.5px solid var(--rule);
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: end;
    gap: 1rem 2rem;
    margin-block-start: 2rem;
    padding-block-start: 1rem;
    display: flex;
  }

  .page-hero .page-hero-meta p {
    max-inline-size: 44ch;
    color: var(--ink-2);
  }

  .year-group {
    grid-template-columns: 1fr 3fr;
    gap: 1rem 2rem;
    padding-block: 2rem;
    display: grid;
  }

  .year-group > h2 {
    font-size: var(--step-3);
    color: var(--ink-2);
    align-self: start;
    font-style: italic;
    position: sticky;
    inset-block-start: 5rem;
  }

  @media not all and (min-width: 48rem) {
    .year-group {
      grid-template-columns: 1fr;
    }

    .year-group > h2 {
      position: static;
    }
  }

  .post {
    max-inline-size: 44rem;
    margin-inline: auto;
  }

  .post-head {
    gap: 1.5rem;
    padding-block: clamp(3rem, 2rem + 5vw, 7rem) 2.5rem;
    display: grid;
  }

  .post-head h1 {
    font-size: var(--step-4);
    font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
  }

  .post-head .dek {
    font-size: var(--step-1);
    color: var(--ink-2);
    max-inline-size: 48ch;
  }

  .post-head .byline {
    border-block: 1px solid var(--hair);
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding-block: .75rem;
    display: flex;
  }

  .back-link {
    text-decoration: none;
  }

  .back-link:hover {
    color: var(--signal);
  }

  .post-foot {
    border-block-start: 1.5px solid var(--rule);
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-block: 5rem 3rem;
    display: grid;
  }

  .post-foot a {
    gap: .4rem;
    padding-block: 1.25rem;
    text-decoration: none;
    display: grid;
  }

  .post-foot a:last-child {
    text-align: end;
  }

  .post-foot a strong {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--step-2);
    line-height: 1.1;
  }

  .post-foot a:hover strong {
    color: var(--signal);
  }
}

@layer prose {
  .prose {
    --measure: 66ch;
    max-inline-size: var(--measure);
    font-size: 1.125rem;
    line-height: 1.7;
  }

  .prose > * + * {
    margin-block-start: 1.25em;
  }

  .prose > p:first-of-type:first-letter {
    float: inline-start;
    font-family: var(--font-display);
    color: var(--signal);
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    margin: .06em .1em 0 0;
    font-size: 4.6em;
    font-weight: 600;
    line-height: .82;
  }

  .prose h2 {
    font-size: var(--step-3);
    margin-block-start: 1.8em;
  }

  .prose h3 {
    font-size: var(--step-1);
    font-variation-settings: "opsz" 36;
    margin-block-start: 2em;
  }

  .prose :is(h2, h3) + * {
    margin-block-start: .75em;
  }

  .prose a {
    -webkit-text-decoration-color: var(--signal);
    -webkit-text-decoration-color: var(--signal);
    text-decoration-color: var(--signal);
    text-decoration-thickness: 1.5px;
  }

  .prose a:hover {
    color: var(--signal);
  }

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

  .prose li + li {
    margin-block-start: .4em;
  }

  .prose li::marker {
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: .85em;
  }

  .prose blockquote {
    border-inline-start: 3px solid var(--signal);
    font-family: var(--font-display);
    font-variation-settings: "opsz" 48, "SOFT" 100;
    padding-inline-start: 1.5em;
    font-size: 1.35em;
    font-style: italic;
    line-height: 1.4;
    position: relative;
  }

  .prose blockquote p + p {
    margin-block-start: .75em;
  }

  .prose blockquote cite {
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--ink-2);
    margin-block-start: .6em;
    font-size: .55em;
    font-style: normal;
    display: block;
  }

  .prose :not(pre) > code {
    font-family: var(--font-mono);
    background: var(--paper-2);
    border: 1px solid var(--hair);
    border-radius: 4px;
    padding: .1em .35em;
    font-size: .86em;
  }

  .prose pre {
    font-family: var(--font-mono);
    color: oklch(90% .015 85);
    tab-size: 2;
    background: oklch(18% .015 60);
    border-radius: 6px;
    margin-inline: -1.4rem;
    padding: 1.25rem 1.4rem;
    font-size: .88rem;
    line-height: 1.65;
    overflow-x: auto;
  }

  .prose hr {
    border: 0;
    block-size: 1.5rem;
    margin-block: 3em;
  }

  .prose hr:before {
    content: "✺  ✺  ✺" / "";
    text-align: center;
    color: var(--signal);
    letter-spacing: .4em;
    display: block;
  }

  .prose figure {
    margin-block: 2.5em;
    margin-inline: -1.4rem;
  }

  .prose figure img {
    border-radius: 4px;
    inline-size: 100%;
  }

  .prose figcaption {
    font-family: var(--font-mono);
    color: var(--ink-2);
    margin-block-start: .6rem;
    padding-inline: 1.4rem;
    font-size: .78rem;
  }

  .prose table {
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    inline-size: 100%;
    font-size: .95rem;
  }

  .prose th {
    text-align: start;
    font-family: var(--font-mono);
    text-transform: uppercase;
    color: var(--ink-2);
    border-block-end: 1.5px solid var(--rule);
    padding: .5rem .75rem .5rem 0;
    font-size: .75rem;
    font-weight: 500;
  }

  .prose td {
    border-block-end: 1px solid var(--hair);
    padding: .6rem .75rem .6rem 0;
  }

  .prose mark {
    background: var(--ochre);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .prose mark {
      background: color-mix(in oklch, var(--ochre) 60%, transparent);
    }
  }

  .prose mark {
    color: inherit;
    padding-inline: .1em;
  }

  .prose .footnotes {
    border-block-start: 1px solid var(--hair);
    color: var(--ink-2);
    margin-block-start: 4em;
    padding-block-start: 1em;
    font-size: .9rem;
  }

  .prose sup a {
    color: var(--signal);
    font-family: var(--font-mono);
    font-size: .75em;
    text-decoration: none;
  }
}

@layer utilities {
  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .m-78 {
    margin: calc(var(--spacing) * 78);
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .table {
    display: table;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .italic {
    font-style: italic;
  }

  .underline {
    text-decoration-line: underline;
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .visually-hidden {
    clip-path: inset(50%);
    white-space: nowrap;
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute !important;
  }

  .skip {
    z-index: 200;
    background: var(--ink);
    color: var(--paper);
    padding: .6rem 1rem;
    position: absolute;
    inset-block-start: -4rem;
    inset-inline-start: 1rem;
  }

  .skip:focus {
    inset-block-start: 1rem;
  }
}

@media (forced-colors: active) {
  .plate-art, .ticker, .contact {
    border: 1px solid canvastext;
  }

  body:before {
    display: none;
  }
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}