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

/* ───────────────────────── reset ───────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  img, svg, video { display: block; max-inline-size: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  ol[role="list"], ul[role="list"] { list-style: none; padding: 0; }
}

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

    --paper:  light-dark(oklch(95.5% 0.014 85), oklch(17% 0.008 70));
    --paper-2: light-dark(oklch(92% 0.018 82), oklch(21% 0.01 70));
    --ink:    light-dark(oklch(19% 0.015 60), oklch(93% 0.012 85));
    --ink-2:  light-dark(oklch(42% 0.015 60), oklch(72% 0.012 80));
    --rule:   light-dark(oklch(19% 0.015 60 / 0.85), oklch(93% 0.012 85 / 0.7));
    --hair:   light-dark(oklch(19% 0.015 60 / 0.16), oklch(93% 0.012 85 / 0.16));

    --signal: light-dark(oklch(62% 0.215 35), oklch(70% 0.19 38));
    --moss:   oklch(44% 0.075 155);
    --cobalt: oklch(47% 0.19 264);
    --ochre:  oklch(78% 0.14 80);
    --plum:   oklch(42% 0.11 345);
    --sky:    oklch(78% 0.07 230);
    --clay:   oklch(62% 0.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(0.8rem, 0.78rem + 0.1vw, 0.86rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
    --step-1:  clamp(1.2rem, 1.1rem + 0.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, 0.5rem + 3vw, 3rem);
    --max: 92rem;
    --ease-out: cubic-bezier(0.2, 0.7, 0.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;
  }
}

/* ───────────────────────── base ───────────────────────── */
@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);
    line-height: 1.55;
    min-block-size: 100dvh;
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  /* paper grain */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 100;
    pointer-events: none;
    opacity: 0.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");
  }
  :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-decoration-thickness: 1px; text-underline-offset: 0.18em; }

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

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

  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; }
  }
}

/* ───────────────────────── layout ───────────────────────── */
@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 {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 1rem 2rem;
    padding-block-end: 1rem;
    border-block-end: 1.5px solid var(--rule);
    margin-block-end: clamp(2rem, 1rem + 3vw, 4rem);

    & h2 { font-size: var(--step-4); }
    & h2 em { font-style: italic; color: var(--signal); }
    & .count { justify-self: end; }
    & p { grid-column: 1 / -1; max-inline-size: 52ch; color: var(--ink-2); }
  }

  @media (width < 48rem) {
    .section-head { grid-template-columns: 1fr; }
    .section-head .count { justify-self: start; }
  }
}

/* ───────────────────────── components ───────────────────────── */
@layer components {

  /* labels */
  .mono {
    font-family: var(--font-mono);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 500;
  }
  .muted { color: var(--ink-2); }

  /* ── masthead ── */
  .masthead {
    position: sticky;
    inset-block-start: 0;
    z-index: 50;
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px) saturate(1.2);
    border-block-end: 1px solid var(--hair);
    view-transition-name: masthead;

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

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

    & i { color: var(--signal); font-weight: 500; }
    & small {
      font-family: var(--font-mono);
      font-size: 0.68rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--ink-2);
    }
  }

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

    & a {
      position: relative;
      text-decoration: none;
      padding-block: 0.4rem;
    }
    & a::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      inset-block-end: 0.15rem;
      block-size: 1.5px;
      background: currentColor;
      scale: 0 1;
      transform-origin: right;
      transition: scale 0.35s var(--ease-out);
    }
    & a:hover::after, & a[aria-current="page"]::after {
      scale: 1 1;
      transform-origin: left;
    }
  }

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

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

    &:hover { border-color: var(--ink); rotate: 180deg; }
    & svg { inline-size: 1rem; }
  }

  @media (width < 60rem) {
    .masthead .clock { display: none; }
  }
  @media (width < 40rem) {
    .wordmark small { display: none; }
    .nav { gap: 0.9rem; font-size: 0.92rem; }
    .masthead-meta { padding-inline-start: 0.75rem; }
  }

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

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

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

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

    & em {
      font-style: italic;
      font-variation-settings: "opsz" 96, "SOFT" 100, "WONK" 1;
    }
    & .hl {
      position: relative;
      white-space: nowrap;
    }
    & .hl svg {
      position: absolute;
      inset-inline: -4%;
      inset-block-end: -0.18em;
      inline-size: 108%;
      block-size: 0.4em;
      overflow: visible;
      color: var(--signal);
    }
    & .hl path {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: draw 1.1s 0.6s var(--ease-out) forwards;
      --animation-reduced: draw 0s forwards;
    }
  }

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

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

    &:hover { rotate: 0deg; }
    & p { font-size: 0.95rem; line-height: 1.45; }
    & a { font-weight: 600; }
  }

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

    &::before {
      content: "";
      inline-size: 0.55rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: oklch(70% 0.18 145);
      box-shadow: 0 0 0 0 oklch(70% 0.18 145 / 0.6);
      animation: pulse 2.2s infinite;
    }
  }
  @keyframes pulse {
    70% { box-shadow: 0 0 0 0.6rem oklch(70% 0.18 145 / 0); }
    100% { box-shadow: 0 0 0 0 oklch(70% 0.18 145 / 0); }
  }

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

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

    & span {
      display: inline-block;
      transition: font-variation-settings 0.5s var(--ease-out), font-weight 0.5s var(--ease-out), translate 0.5s var(--ease-out);
    }
    & span:hover {
      font-weight: 300;
      font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
      translate: 0 -0.03em;
    }
    & .c {
      font-style: italic;
      font-weight: 500;
      color: var(--signal);
    }
  }

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

    & .note {
      position: absolute;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      white-space: nowrap;
      color: var(--ink-2);
    }
    & .note::before {
      content: "";
      inline-size: 3.5rem;
      border-block-start: 1px solid currentColor;
    }
    & .n1 { inset-block-start: 10%; inset-inline-end: 0; flex-direction: row-reverse; }
    & .n2 { inset-block-start: 22%; inset-inline-end: 0; flex-direction: row-reverse; }
  }

  @media (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; rotate: 0deg; max-inline-size: 26rem; }
    .specimen-notes { display: none; }
  }

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

    &:hover .ticker-track { animation-play-state: paused; }
  }
  .ticker-track {
    display: flex;
    flex-shrink: 0;
    gap: 2.5rem;
    padding: 0.85rem 1.25rem;
    padding-inline-end: 2.5rem;
    animation: ticker 40s linear infinite;
    --animation-reduced: none;

    & span { display: inline-flex; align-items: center; gap: 2.5rem; white-space: nowrap; }
    & span::after { content: "✺" / ""; color: var(--signal); }
    & b { color: var(--signal); font-weight: 500; margin-inline-end: 0.5rem; }
  }
  @keyframes ticker { to { translate: -100% 0; } }

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

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

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

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

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

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

    & h3 {
      font-size: var(--step-4);
      font-weight: 400;
      font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    & h3 em { font-style: italic; }
    & .lede { font-size: var(--step-1); line-height: 1.4; }
    & > p:not(.lede) { color: var(--ink-2); }
  }

  .plate.flip {
    & .plate-art { grid-column: 6 / -1; grid-row: 2; }
    & .plate-copy { grid-column: 1 / span 5; grid-row: 2; }
  }

  @media (width < 60rem) {
    .plate .plate-art, .plate.flip .plate-art { grid-column: 1 / -1; grid-row: auto; }
    .plate .plate-copy, .plate.flip .plate-copy { grid-column: 1 / -1; grid-row: auto; margin-block-start: 2rem; }
  }

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

    & dt, & dd {
      padding-block: 0.55rem;
      border-block-end: 1px solid var(--hair);
    }
    & dt { padding-inline-end: 2rem; color: var(--ink-2); }
  }

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

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

    &:hover {
      background: var(--plate, var(--signal));
      translate: 0 -2px;
      box-shadow: 0 6px 0 -1px var(--ink);
    }
    & .arrow { transition: translate 0.3s var(--ease-out); }
    &:hover .arrow { translate: 3px 0; }
  }

  .link-quiet {
    font-weight: 500;
    text-decoration-color: var(--hair);
    transition: text-decoration-color 0.2s;
    &:hover { text-decoration-color: currentColor; }
  }

  /* plate art: Tidewater */
  .art-tide {
    & .waves {
      position: absolute;
      inset: auto -10% -6% -10%;
      inline-size: 120%;
      max-inline-size: none;
      block-size: 62%;
      opacity: 0.55;
    }
    & .waves g {
      animation: drift 14s linear infinite;
      --animation-reduced: none;
    }
    & .waves g:nth-child(2) { animation-duration: 22s; animation-direction: reverse; opacity: 0.6; }

    & .sun {
      position: absolute;
      inset-block-start: 12%;
      inset-inline-end: 12%;
      inline-size: 18%;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--ochre);
      mix-blend-mode: screen;
      opacity: 0.9;
    }
  }
  @keyframes drift { to { translate: -400px 0; } }

  .window {
    position: absolute;
    inset-block-start: 14%;
    inset-inline-start: 10%;
    inline-size: 52%;
    padding: 0.6rem 0.75rem 1.25rem;
    background: oklch(98% 0.01 90);
    color: oklch(22% 0.02 160);
    border-radius: 10px;
    box-shadow:
      0 1px 0 oklch(100% 0 0 / 0.5) inset,
      0 2px 4px oklch(15% 0.03 160 / 0.15),
      0 18px 40px -10px oklch(15% 0.05 160 / 0.45);
    rotate: -3deg;
    transition: rotate 0.6s var(--ease-out), translate 0.6s var(--ease-out);
    container-type: inline-size;

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

    & .lights { display: flex; gap: 0.3rem; margin-block-end: 1rem; }
    & .lights i { inline-size: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: oklch(80% 0.02 90); }
    & .lights i:first-child { background: oklch(68% 0.18 28); }
    & .time {
      font-family: var(--font-display);
      font-size: 24cqi;
      line-height: 0.9;
      font-weight: 300;
      letter-spacing: -0.04em;
      font-variant-numeric: tabular-nums;
      font-variation-settings: "opsz" 144, "SOFT" 100;
    }
    & .label { margin-block-start: 0.5rem; font-size: 0.62rem; color: oklch(45% 0.03 160); }
    & .bar {
      margin-block-start: 0.9rem;
      block-size: 4px;
      border-radius: 4px;
      background: linear-gradient(to right, var(--moss) 62%, oklch(90% 0.01 90) 0);
    }
  }

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

  .terminal {
    inline-size: 82%;
    background: oklch(17% 0.02 265);
    color: oklch(88% 0.02 250);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: clamp(0.66rem, 0.5rem + 0.55vw, 0.92rem);
    line-height: 1.75;
    box-shadow: 0 30px 60px -20px oklch(10% 0.05 265 / 0.7), 0 0 0 1px oklch(100% 0 0 / 0.08) inset;
    rotate: 2deg;
    transition: rotate 0.6s var(--ease-out);
    overflow: hidden;

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

    & .bar {
      display: flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.6rem 0.8rem;
      border-block-end: 1px solid oklch(100% 0 0 / 0.08);
      color: oklch(60% 0.02 250);
      font-size: 0.85em;
    }
    & .bar i { inline-size: 0.55rem; aspect-ratio: 1; border-radius: 50%; background: oklch(35% 0.02 265); }
    & .bar span { margin-inline-start: auto; }
    & pre { margin: 0; padding: 1rem 1.1rem 1.25rem; font: inherit; white-space: pre-wrap; }
    & .ln { display: block; }
    & .p { color: var(--ochre); }
    & .ok { color: oklch(78% 0.16 150); }
    & .dim { color: oklch(58% 0.02 250); }
    & .hot { color: oklch(75% 0.17 45); }
    & .cursor {
      display: inline-block;
      inline-size: 0.6em;
      block-size: 1.1em;
      vertical-align: text-bottom;
      background: currentColor;
      animation: blink 1s steps(1) infinite;
    }
  }
  @keyframes blink { 50% { opacity: 0; } }

  :root.js .terminal .ln { opacity: 0; translate: 0 4px; }
  :root.js .terminal.is-running .ln {
    animation: line-in 0.35s var(--ease-out) forwards;
    animation-delay: calc(var(--i) * 0.42s);
    --animation-reduced: line-in 0s forwards;
  }
  @keyframes line-in { to { opacity: 1; translate: 0 0; } }

  .plate-caption {
    position: absolute;
    inset-block-end: 0.9rem;
    inset-inline-start: 1rem;
    font-size: 0.68rem;
    opacity: 0.75;
    z-index: 2;
  }

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

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

    &:hover {
      translate: -4px -4px;
      box-shadow: 8px 8px 0 var(--tint);
    }
    &:nth-child(1) { grid-column: span 7; }
    &:nth-child(2) { grid-column: span 5; }
    &:nth-child(3) { grid-column: span 5; }
    &:nth-child(4) { grid-column: span 7; }

    & .work-top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
    & h3 { font-size: var(--step-3); }
    & h3 em { font-style: italic; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; }
    & p { color: var(--ink-2); max-inline-size: 46ch; margin-block-start: 0.75rem; }
    & .work-foot {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.5rem;
      padding-block-start: 0.85rem;
      border-block-start: 1px solid var(--hair);
    }
    & .go { transition: translate 0.3s var(--ease-out); }
    &:hover .go { translate: 4px 0; }
  }

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

  .tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .tag {
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--hair);
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

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

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

    &.stripes  { background: repeating-linear-gradient(-45deg, var(--c1) 0 0.45rem, var(--c2) 0 0.9rem); }
    &.checker  { background: repeating-conic-gradient(var(--c1) 0 25%, var(--c2) 0 50%) 0 / 1.1rem 1.1rem; }
    &.dots {
      --polka: radial-gradient(circle, var(--c1) 0.28rem, transparent calc(0.28rem + 1px));
      background: var(--polka) 0 0, var(--polka) 0.55rem 0.55rem var(--c2);
      background-size: 1.1rem 1.1rem;
    }
    &.rings    { background: repeating-radial-gradient(circle at 100% 100%, var(--c1) 0 0.35rem, var(--c2) 0 0.7rem); }
  }

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

  .index-row {
    counter-increment: idx;

    & a {
      position: relative;
      display: grid;
      grid-template-columns: 3.5rem minmax(10rem, 1.1fr) 2fr 9rem 4rem 1.5rem;
      align-items: baseline;
      gap: 1rem;
      padding: 1.1rem 0.5rem;
      border-block-end: 1px solid var(--hair);
      text-decoration: none;
      isolation: isolate;
      transition: color 0.25s, padding 0.35s var(--ease-out);
    }
    & a::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--ink);
      scale: 1 0;
      transform-origin: bottom;
      transition: scale 0.35s var(--ease-out);
    }
    & a:hover, & a:focus-visible { color: var(--paper); padding-inline: 1.25rem; }
    & a:hover::before, & a:focus-visible::before { scale: 1 1; }
    & a:hover .muted { color: color-mix(in oklab, var(--paper) 70%, transparent); }

    & .num::before { content: counter(idx, decimal-leading-zero); }
    & .name {
      font-family: var(--font-display);
      font-size: var(--step-1);
      font-variation-settings: "opsz" 48, "SOFT" 50;
    }
    & .arr { justify-self: end; transition: rotate 0.3s var(--ease-out); }
    & a:hover .arr { rotate: -45deg; color: var(--signal); }
  }

  @media (width < 52rem) {
    .index-row a {
      grid-template-columns: 2.5rem 1fr 1.5rem;
      & .desc { grid-column: 2 / -1; grid-row: 2; }
      & .kind, & .year { display: none; }
      & .arr { grid-column: 3; grid-row: 1; }
    }
  }

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

    & aside { display: grid; gap: 1.25rem; align-content: start; }
    & aside p { color: var(--ink-2); max-inline-size: 34ch; }
  }
  @media (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 {
    display: grid;
    grid-template-columns: 7rem 1fr auto;
    gap: 1.5rem;
    align-items: baseline;
    padding-block: 1.4rem;
    border-block-end: 1px solid var(--hair);
    text-decoration: none;

    & h3 {
      font-size: var(--step-2);
      transition: color 0.2s, translate 0.35s var(--ease-out);
    }
    & p { grid-column: 2; color: var(--ink-2); margin-block-start: -0.75rem; }
    &:hover h3 { color: var(--signal); translate: 0.4rem 0; }
  }
  @media (width < 40rem) {
    .note-item a { grid-template-columns: 1fr; gap: 0.5rem; }
    .note-item a p { grid-column: 1; margin: 0; }
  }

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

    & .about-lede {
      grid-column: 1 / span 7;
      font-family: var(--font-display);
      font-size: var(--step-2);
      line-height: 1.25;
      font-variation-settings: "opsz" 72, "SOFT" 50;
    }
    & .about-lede em { font-style: italic; color: var(--signal); }
    & .about-body { grid-column: 1 / span 6; display: grid; gap: 1rem; color: var(--ink-2); }
    & .principles { grid-column: 8 / -1; grid-row: 1 / span 2; }
  }
  @media (width < 60rem) {
    .about > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  }

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

    & ol { padding: 0; list-style: none; counter-reset: p; display: grid; }
    & li {
      counter-increment: p;
      display: grid;
      grid-template-columns: 2.25rem 1fr;
      padding-block: 0.8rem;
      border-block-end: 1px solid var(--hair);
    }
    & li:last-child { border: 0; padding-block-end: 0; }
    & li::before {
      content: counter(p, upper-roman) ".";
      font-family: var(--font-display);
      font-style: italic;
      color: var(--signal);
    }
    & strong { display: block; font-weight: 600; }
    & span { color: var(--ink-2); font-size: 0.95rem; }
  }

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

    & .wrap { display: grid; gap: 2rem; }
    & .big {
      font-family: var(--font-display);
      font-size: clamp(2.5rem, 1rem + 8vw, 9.5rem);
      line-height: 0.92;
      letter-spacing: -0.045em;
      font-weight: 400;
      font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
      text-decoration: none;
      overflow-wrap: anywhere;
      display: inline-block;
    }
    & .big .u {
      background: linear-gradient(var(--signal), var(--signal)) 0 92% / 0% 0.08em no-repeat;
      transition: background-size 0.6s var(--ease-out);
    }
    & .big:hover .u, & .big:focus-visible .u { background-size: 100% 0.08em; }
    & .big em { font-style: italic; color: var(--signal); }
    & .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 3rem; }
    & .socials { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
    & .socials a { text-decoration: none; }
    & .socials a:hover { color: var(--signal); }
  }

  .stamp {
    position: absolute;
    inset-block-start: clamp(1.5rem, 4vw, 3rem);
    inset-inline-end: var(--gutter);
    inline-size: clamp(7rem, 13vw, 10.5rem);
    color: var(--signal);
    animation: spin 30s linear infinite;
    --animation-reduced: none;
  }
  @keyframes spin { to { rotate: 1turn; } }
  @media (width < 40rem) { .stamp { display: none; } }

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

    & .wrap {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 1rem 2rem;
    }
    & a { text-decoration: none; }
    & a:hover { color: var(--signal); }
  }

  /* ── reveal ── */
  :root.js .reveal {
    opacity: 0;
    translate: 0 1.5rem;
    transition: opacity 0.9s var(--ease-out), translate 0.9s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 90ms);
  }
  :root.js .reveal.is-in { opacity: 1; translate: 0 0; }
  @media (prefers-reduced-motion: reduce) {
    :root.js .reveal { opacity: 1; translate: none; transition: none; }
  }

  /* ── blog index ── */
  .page-hero {
    padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2rem, 4vw, 4rem);

    & h1 {
      font-size: clamp(3.5rem, 1rem + 12vw, 12rem);
      line-height: 0.85;
      letter-spacing: -0.055em;
      font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    }
    & h1 em { font-style: italic; color: var(--signal); }
    & .page-hero-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: end;
      gap: 1rem 2rem;
      margin-block-start: 2rem;
      padding-block-start: 1rem;
      border-block-start: 1.5px solid var(--rule);
    }
    & .page-hero-meta p { max-inline-size: 44ch; color: var(--ink-2); }
  }

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

    & > h2 {
      font-size: var(--step-3);
      font-style: italic;
      color: var(--ink-2);
      position: sticky;
      inset-block-start: 5rem;
      align-self: start;
    }
  }
  @media (width < 48rem) { .year-group { grid-template-columns: 1fr; } .year-group > h2 { position: static; } }

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

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

    & h1 {
      font-size: var(--step-4);
      font-variation-settings: "opsz" 144, "SOFT" 70, "WONK" 1;
    }
    & .dek { font-size: var(--step-1); color: var(--ink-2); max-inline-size: 48ch; }
    & .byline {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1.5rem;
      padding-block: 0.75rem;
      border-block: 1px solid var(--hair);
    }
  }

  .back-link {
    text-decoration: none;
    &:hover { color: var(--signal); }
  }

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

    & a {
      display: grid;
      gap: 0.4rem;
      padding-block: 1.25rem;
      text-decoration: none;
    }
    & a:last-child { text-align: end; }
    & a strong {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: var(--step-2);
      line-height: 1.1;
    }
    & a:hover strong { color: var(--signal); }
  }
}

/* ───────────────────────── prose (rendered markdown) ───────────────────────── */
@layer prose {
  .prose {
    --measure: 66ch;
    font-size: 1.125rem;
    line-height: 1.7;
    max-inline-size: var(--measure);

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

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

    & h2 {
      font-size: var(--step-3);
      margin-block-start: 1.8em;
    }
    & h3 {
      font-size: var(--step-1);
      margin-block-start: 2em;
      font-variation-settings: "opsz" 36;
    }
    & :is(h2, h3) + * { margin-block-start: 0.75em; }

    & a {
      text-decoration-color: var(--signal);
      text-decoration-thickness: 1.5px;
      &:hover { color: var(--signal); }
    }

    & :is(ul, ol) { padding-inline-start: 1.3em; }
    & li + li { margin-block-start: 0.4em; }
    & li::marker { color: var(--signal); font-family: var(--font-mono); font-size: 0.85em; }

    & blockquote {
      position: relative;
      padding-inline-start: 1.5em;
      border-inline-start: 3px solid var(--signal);
      font-family: var(--font-display);
      font-size: 1.35em;
      line-height: 1.4;
      font-style: italic;
      font-variation-settings: "opsz" 48, "SOFT" 100;
      & p + p { margin-block-start: 0.75em; }
      & cite { display: block; margin-block-start: 0.6em; font-family: var(--font-mono); font-style: normal; font-size: 0.55em; text-transform: uppercase; color: var(--ink-2); }
    }

    & :not(pre) > code {
      font-family: var(--font-mono);
      font-size: 0.86em;
      padding: 0.1em 0.35em;
      background: var(--paper-2);
      border: 1px solid var(--hair);
      border-radius: 4px;
    }

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

    & hr {
      border: 0;
      block-size: 1.5rem;
      margin-block: 3em;
      &::before {
        content: "✺  ✺  ✺" / "";
        display: block;
        text-align: center;
        color: var(--signal);
        letter-spacing: 0.4em;
      }
    }

    & figure { margin-block: 2.5em; margin-inline: -1.4rem; }
    & figure img { inline-size: 100%; border-radius: 4px; }
    & figcaption { margin-block-start: 0.6rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-2); padding-inline: 1.4rem; }

    & table {
      inline-size: 100%;
      border-collapse: collapse;
      font-size: 0.95rem;
      font-variant-numeric: tabular-nums;
    }
    & th {
      text-align: start;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      font-weight: 500;
      text-transform: uppercase;
      color: var(--ink-2);
      border-block-end: 1.5px solid var(--rule);
      padding: 0.5rem 0.75rem 0.5rem 0;
    }
    & td { padding: 0.6rem 0.75rem 0.6rem 0; border-block-end: 1px solid var(--hair); }

    & mark { background: color-mix(in oklch, var(--ochre) 60%, transparent); color: inherit; padding-inline: 0.1em; }

    & .footnotes {
      margin-block-start: 4em;
      padding-block-start: 1em;
      border-block-start: 1px solid var(--hair);
      font-size: 0.9rem;
      color: var(--ink-2);
    }
    & sup a { text-decoration: none; color: var(--signal); font-family: var(--font-mono); font-size: 0.75em; }
  }
}

/* ───────────────────────── utilities ───────────────────────── */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip-path: inset(50%);
    white-space: nowrap;
  }
  .skip {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -4rem;
    z-index: 200;
    padding: 0.6rem 1rem;
    background: var(--ink);
    color: var(--paper);
    &:focus { inset-block-start: 1rem; }
  }
}

@media (forced-colors: active) {
  .plate-art, .ticker, .contact { border: 1px solid CanvasText; }
  body::before { display: none; }
}