@font-face {
      font-family: "Fraunces";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url("/fonts/fraunces-300.woff2") format("woff2");
    }

    @font-face {
      font-family: "Fraunces";
      font-style: italic;
      font-weight: 200;
      font-display: swap;
      src: url("/fonts/fraunces-italic-200.woff2") format("woff2");
    }

    @font-face {
      font-family: "IBM Plex Sans";
      font-style: normal;
      font-weight: 300 500;
      font-display: swap;
      src: url("/fonts/ibmplexsans.woff2") format("woff2");
    }

    @font-face {
      font-family: "IBM Plex Sans";
      font-style: italic;
      font-weight: 300 400;
      font-display: swap;
      src: url("/fonts/ibmplexsans-italic.woff2") format("woff2");
    }

    @font-face {
      font-family: "JetBrains Mono";
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url("/fonts/jetbrainsmono-300.woff2") format("woff2");
    }

    :root {
      --bg: #1F1612;
      --ink: #EFE0CB;
      --ink-soft: rgba(239, 224, 203, 0.72);
      --muted: #A89279;
      --quiet: #9C8271;
      --rule: rgba(239, 224, 203, 0.14);
      --rule-soft: rgba(239, 224, 203, 0.06);
      --coastal: #5EE3FF;
      --peach: #DCA388;
      --brass: #C8A560;
      --chrome-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
      --grain-opacity: 0.06;
      --vhs-base: #EFE0CB;
      --vhs-ghost-1: #FF3D7F;
      --vhs-ghost-2: #5EE3FF;
      --vhs-blend: screen;
      --vhs-ghost-1-opacity: 0.78;
      --vhs-ghost-2-opacity: 0.62;
      --vhs-base-glow: none;
      --vhs-ghost-1-glow: 0 0 4px rgba(255, 61, 127, 0.45);
      --vhs-ghost-2-glow: 0 0 4px rgba(94, 227, 255, 0.40);
      --vhs-fuzz-cycle: 4.6s;
      --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
      --sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
      --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
      --maxw: 640px;
      --pad-x: 28px;
    }

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

    html,
    body {
      margin: 0;
      padding: 0;
    }

    html {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      background: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(94, 227, 255, 0.045), transparent 65%), radial-gradient(ellipse 80% 50% at 50% 100%, rgba(220, 163, 136, 0.035), transparent 60%), var(--bg);
      color: var(--ink);
      font-family: var(--sans);
      font-size: clamp(15px, 0.92rem + 0.15vw, 17px);
      line-height: 1.6;
      min-height: 100vh;
    }

    ::selection {
      background: var(--coastal);
      color: var(--bg);
    }

    a {
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid var(--rule);
      transition: color .2s ease, border-color .2s ease, text-shadow .25s ease;
    }

    a:hover {
      color: var(--coastal);
      border-color: var(--coastal);
      text-shadow: 0 0 12px rgba(94, 227, 255, 0.45);
    }

    a:focus-visible {
      outline: 1px solid var(--peach);
      outline-offset: 4px;
      border-radius: 2px;
    }

    a[href*="pacificmuse"] {
      color: var(--coastal);
      border-bottom-color: rgba(94, 227, 255, 0.40);
      text-shadow: 0 0 10px rgba(94, 227, 255, 0.32);
    }

    a[href*="pacificmuse"]:hover {
      color: #B6F0FF;
      border-bottom-color: var(--coastal);
      text-shadow: 0 0 14px rgba(94, 227, 255, 0.55);
    }

    .grain {
      position: fixed;
      inset: -5%;
      z-index: 1;
      pointer-events: none;
      opacity: var(--grain-opacity);
      background-image: url("/grain.webp");
      background-size: 128px 128px;
      animation: grain 5s steps(6) infinite;
      will-change: transform;
    }

    .grain.js-driven {
      animation: none;
    }

    @keyframes grain {
      0% {
        transform: translate3d(0, 0, 0);
      }

      25% {
        transform: translate3d(-0.4%, 0.2%, 0);
      }

      50% {
        transform: translate3d(0.3%, -0.4%, 0);
      }

      75% {
        transform: translate3d(-0.2%, 0.3%, 0);
      }

      100% {
        transform: translate3d(0, 0, 0);
      }
    }

    .corner {
      position: fixed;
      z-index: 4;
      width: 22px;
      height: 22px;
      pointer-events: none;
      opacity: 0.6;
    }

    .corner::before,
    .corner::after {
      content: '';
      position: absolute;
      background: var(--ink);
    }

    .corner::before {
      width: 100%;
      height: 1px;
      top: 0;
    }

    .corner::after {
      height: 100%;
      width: 1px;
      left: 0;
    }

    .tl {
      top: 18px;
      left: 18px;
    }

    .tr {
      top: 18px;
      right: 18px;
      transform: scaleX(-1);
    }

    .bl {
      bottom: 18px;
      left: 18px;
      transform: scaleY(-1);
    }

    .br {
      bottom: 18px;
      right: 18px;
      transform: scale(-1, -1);
    }

    .rail {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 4;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 26px clamp(20px, 4vw, 48px);
      font-family: var(--mono);
      font-weight: 300;
      font-size: 10px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--ink-soft);
      text-shadow: var(--chrome-shadow);
      pointer-events: none;
    }

    .rail-left,
    .rail-right {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .rail-rule {
      display: inline-block;
      width: 24px;
      height: 1px;
      background: var(--rule);
    }

    .rail-clock {
      font-variant-numeric: tabular-nums;
      text-transform: none;
      letter-spacing: 0.18em;
    }

    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--ink);
      box-shadow: 0 0 10px var(--ink), 0 0 24px rgba(255, 220, 180, 0.5);
      animation: pulse 2.6s ease-in-out infinite;
      flex: none;
      will-change: transform, opacity;
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 0.35;
        transform: scale(0.85);
      }

      50% {
        opacity: 1.00;
        transform: scale(1.18);
      }
    }

    .version-stamp {
      position: fixed;
      bottom: 24px;
      right: clamp(20px, 4vw, 48px);
      z-index: 4;
      font-family: var(--mono);
      font-weight: 300;
      font-size: 8.5px;
      letter-spacing: 0.22em;
      font-variant-numeric: tabular-nums;
      color: var(--ink-soft);
      opacity: 0.5;
      pointer-events: none;
      text-shadow: var(--chrome-shadow);
    }

    .fade-overlay {
      position: fixed;
      inset: 0;
      z-index: 999;
      background: #000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 600ms cubic-bezier(.4, 0, .2, 1);
    }

    .fade-overlay.is-active {
      opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      .fade-overlay {
        transition: none;
      }
    }

    .wrap {
      position: relative;
      z-index: 3;
      max-width: var(--maxw);
      margin: 0 auto;
      padding: 0 var(--pad-x);
    }

    .hero {
      padding: clamp(72px, 12vh, 120px) 0 clamp(40px, 8vh, 80px);
    }

    .name {
      font-family: var(--serif);
      font-optical-sizing: auto;
      font-size: clamp(48px, 10vw, 96px);
      line-height: 1.04;
      letter-spacing: -0.02em;
      margin: 0 0 clamp(24px, 5vw, 40px);
      color: var(--ink);
    }

    .name .given {
      font-weight: 300;
      font-style: normal;
    }

    .name .surname {
      font-weight: 200;
      font-style: italic;
      color: inherit;
    }

    .intro p {
      font-family: var(--sans);
      font-weight: 400;
      font-size: clamp(16px, 1rem + 0.35vw, 19px);
      line-height: 1.6;
      margin: 0 0 18px;
      color: var(--ink);
    }

    .intro p.quiet {
      color: var(--muted);
      font-size: clamp(15px, 0.92rem + 0.15vw, 17px);
    }

    .intro a {
      border-bottom: 1px solid var(--rule);
    }

    .intro em.thesis {
      font-style: italic;
      font-weight: 400;
      color: var(--peach);
      text-shadow: 0 0 12px rgba(220, 163, 136, 0.32);
      position: relative;
      isolation: isolate;
      animation: vhs-fuzz var(--vhs-fuzz-cycle) ease-in-out infinite;
    }

    .intro a.thesis-link,
    .intro a.thesis-link:hover {
      border-bottom: none;
      color: inherit;
      text-shadow: none;
      text-decoration: none;
    }

    .intro a.thesis-link .thesis {
      transition: text-shadow 0.3s ease;
    }

    .intro a.thesis-link:hover .thesis {
      text-shadow: 0 0 18px rgba(220, 163, 136, 0.55);
    }

    .intro a.thesis-link:focus-visible {
      outline: 1px solid var(--peach);
      outline-offset: 4px;
      border-radius: 2px;
    }

    section.block {
      padding: clamp(36px, 6vh, 64px) 0;
      border-top: 1px solid var(--rule-soft);
    }

    section.block h2 {
      font-family: var(--sans);
      font-weight: 400;
      font-size: 13px;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 24px;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
    }

    .h2-aside {
      color: var(--quiet);
      font-family: var(--mono);
      font-weight: 300;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: none;
      font-variant-numeric: tabular-nums;
    }

    .now p {
      margin: 0 0 12px;
      color: var(--ink);
      font-size: clamp(14.5px, 0.88rem + 0.18vw, 16.5px);
      line-height: 1.6;
    }

    .now .tick {
      color: var(--muted);
      margin-right: 8px;
    }

    .now strong {
      font-weight: 500;
      color: var(--peach);
    }

    .ledger {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .ledger li {
      display: grid;
      grid-template-columns: 36px 180px 1fr;
      gap: 18px;
      padding: 14px 0;
      align-items: baseline;
      border-bottom: 1px dotted var(--rule-soft);
    }

    .ledger li:last-child {
      border-bottom: 0;
    }

    .ledger .num {
      font-family: var(--sans);
      font-weight: 500;
      font-style: italic;
      font-size: clamp(13px, 0.82rem + 0.1vw, 15px);
      color: var(--brass);
      letter-spacing: 0.04em;
      text-shadow: 0 0 6px rgba(200, 165, 96, 0.30);
    }

    .ledger .label {
      font-family: var(--sans);
      font-weight: 500;
      font-size: clamp(15px, 0.92rem + 0.2vw, 18px);
      line-height: 1.3;
      color: var(--peach);
    }

    .ledger .ev {
      color: var(--ink);
      font-size: clamp(13.5px, 0.85rem + 0.15vw, 15.5px);
      line-height: 1.55;
    }

    .ledger .ev .meaning {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(13px, 0.82rem + 0.12vw, 15px);
      line-height: 1.5;
    }

    .elsewhere {
      display: flex;
      flex-wrap: wrap;
      gap: 14px 24px;
    }

    .elsewhere a {
      border-bottom: 1px solid var(--rule);
      font-size: clamp(14px, 0.85rem + 0.18vw, 16px);
    }

    .elsewhere .arrow {
      color: var(--muted);
      margin-left: 4px;
      transition: transform .25s ease, color .2s ease;
      display: inline-block;
    }

    .elsewhere a:hover .arrow {
      transform: translate(2px, -2px);
      color: var(--coastal);
    }

    .elsewhere a[href*="pacificmuse"] .arrow {
      color: var(--coastal);
    }

    footer.foot {
      padding: 56px 0 80px;
      border-top: 1px solid var(--rule-soft);
      color: var(--muted);
      font-size: clamp(12px, 0.75rem + 0.12vw, 14px);
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 12px;
    }

    footer.foot a {
      border-bottom: none;
      color: var(--muted);
    }

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

    footer .by {
      font-style: italic;
      color: var(--muted);
    }

    .reveal {
      opacity: 0;
      transform: translateY(6px);
      animation: rise .8s cubic-bezier(.2, .6, .2, 1) forwards;
    }

    .reveal.d1 {
      animation-delay: .04s;
    }

    .reveal.d2 {
      animation-delay: .14s;
    }

    .reveal.d3 {
      animation-delay: .24s;
    }

    .reveal.d4 {
      animation-delay: .34s;
    }

    .reveal.d5 {
      animation-delay: .44s;
    }

    @keyframes rise {
      to {
        opacity: 1;
        transform: none;
      }
    }

    @media (max-width: 540px) {
      .ledger li {
        grid-template-columns: 30px 1fr;
      }

      .ledger .label {
        grid-column: 2 / 3;
        margin-bottom: 4px;
      }

      .ledger .ev {
        grid-column: 2 / 3;
      }
    }

    @media (max-width: 480px) {
      .rail {
        padding: 18px clamp(14px, 4vw, 24px);
        font-size: 8.5px;
        letter-spacing: 0.22em;
      }

      .rail-rule {
        width: 18px;
      }

      .corner {
        width: 18px;
        height: 18px;
      }

      .tl,
      .tr {
        top: 14px;
      }

      .bl,
      .br {
        bottom: 14px;
      }

      .tl,
      .bl {
        left: 14px;
      }

      .tr,
      .br {
        right: 14px;
      }

      .version-stamp {
        bottom: 18px;
        right: clamp(14px, 4vw, 24px);
      }

      .hero {
        padding-top: 84px;
      }
    }

    @keyframes vhs-fuzz {

      0%,
      100% {
        filter: blur(0.15px) saturate(1.0) contrast(1.00);
      }

      50% {
        filter: blur(0.55px) saturate(1.18) contrast(1.04);
      }
    }

    .vhs-glitch {
      position: relative;
      display: inline-block;
      color: var(--vhs-base);
      text-shadow: var(--vhs-base-glow);
      --vhs-amp: 1;
    }

    .vhs-glitch.vhs-rare {
      --vhs-amp: 0.5;
    }

    .vhs-glitch::before,
    .vhs-glitch::after {
      content: attr(data-text);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      pointer-events: none;
      mix-blend-mode: var(--vhs-blend);
      font: inherit;
      letter-spacing: inherit;
      font-style: inherit;
      font-weight: inherit;
      font-variation-settings: inherit;
      opacity: 0;
    }

    .vhs-glitch.vhs-firing::before {
      color: var(--vhs-ghost-1);
      text-shadow: var(--vhs-ghost-1-glow);
      animation: vhs-burst-1 var(--vhs-burst-duration, 600ms) steps(1) forwards;
    }

    .vhs-glitch.vhs-firing::after {
      color: var(--vhs-ghost-2);
      text-shadow: var(--vhs-ghost-2-glow);
      animation: vhs-burst-2 var(--vhs-burst-duration, 600ms) steps(1) forwards;
    }

    @keyframes vhs-burst-1 {
      0% {
        transform: translateX(calc(-1px * var(--vhs-amp)));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 0;
      }

      5% {
        transform: translateX(calc(-7px * var(--vhs-amp)));
        clip-path: polygon(0 18%, 100% 18%, 100% 32%, 0 32%);
        opacity: 1;
      }

      15% {
        transform: translateX(calc(6px * var(--vhs-amp)));
        clip-path: polygon(0 55%, 100% 55%, 100% 68%, 0 68%);
        opacity: 1;
      }

      25% {
        transform: translateX(calc(-5px * var(--vhs-amp)));
        clip-path: polygon(0 8%, 100% 8%, 100% 22%, 0 22%);
        opacity: 1;
      }

      35% {
        transform: translateX(calc(4px * var(--vhs-amp)));
        clip-path: polygon(0 70%, 100% 70%, 100% 88%, 0 88%);
        opacity: 0.95;
      }

      45% {
        transform: translateX(calc(-1px * var(--vhs-amp)));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: var(--vhs-ghost-1-opacity);
      }

      65% {
        transform: translateX(calc(-5px * var(--vhs-amp)));
        clip-path: polygon(0 38%, 100% 38%, 100% 52%, 0 52%);
        opacity: 1;
      }

      75% {
        transform: translateX(calc(2px * var(--vhs-amp)));
        clip-path: polygon(0 78%, 100% 78%, 100% 92%, 0 92%);
        opacity: 0.95;
      }

      85% {
        transform: translateX(calc(-1px * var(--vhs-amp)));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: var(--vhs-ghost-1-opacity);
      }

      100% {
        opacity: 0;
      }
    }

    @keyframes vhs-burst-2 {
      0% {
        transform: translateX(calc(1px * var(--vhs-amp)));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: 0;
      }

      5% {
        transform: translateX(calc(8px * var(--vhs-amp)));
        clip-path: polygon(0 60%, 100% 60%, 100% 75%, 0 75%);
        opacity: 0.95;
      }

      15% {
        transform: translateX(calc(-7px * var(--vhs-amp)));
        clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%);
        opacity: 0.95;
      }

      25% {
        transform: translateX(calc(5px * var(--vhs-amp)));
        clip-path: polygon(0 75%, 100% 75%, 100% 90%, 0 90%);
        opacity: 0.95;
      }

      35% {
        transform: translateX(calc(-3px * var(--vhs-amp)));
        clip-path: polygon(0 12%, 100% 12%, 100% 28%, 0 28%);
        opacity: 0.9;
      }

      45% {
        transform: translateX(calc(1px * var(--vhs-amp)));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: var(--vhs-ghost-2-opacity);
      }

      65% {
        transform: translateX(calc(6px * var(--vhs-amp)));
        clip-path: polygon(0 30%, 100% 30%, 100% 48%, 0 48%);
        opacity: 0.95;
      }

      75% {
        transform: translateX(calc(-3px * var(--vhs-amp)));
        clip-path: polygon(0 65%, 100% 65%, 100% 82%, 0 82%);
        opacity: 0.9;
      }

      85% {
        transform: translateX(calc(1px * var(--vhs-amp)));
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        opacity: var(--vhs-ghost-2-opacity);
      }

      100% {
        opacity: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .reveal {
        opacity: 1;
        transform: none;
        animation: none;
      }

      .grain {
        display: none;
      }

      .dot {
        animation: none;
        opacity: 0.6;
        transform: none;
      }

      .intro em.thesis {
        animation: none;
        filter: none;
      }

      .vhs-glitch::before,
      .vhs-glitch::after {
        display: none;
      }
    }