:root {
      --ink: #171714;
      --night: #11110f;
      --night-soft: #191916;

      --paper: #e9e6dd;
      --paper-soft: #dedbd1;
      --cream: #f1eee6;

      --muted: #77756d;

      --acid: #c8f36a;
      --orange: #e47a3d;

      --line: rgba(23, 23, 20, 0.14);
      --line-light: rgba(233, 230, 221, 0.12);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      background: var(--night);
    }

    body {
      margin: 0;
      overflow-x: hidden;

      background: var(--night);
      color: var(--cream);

      font-family: "DM Sans", sans-serif;

      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    ::selection {
      background: var(--acid);
      color: var(--ink);
    }

    .serif {
      font-family: "Instrument Serif", serif;
    }

    .mono {
      font-family: "DM Mono", monospace;
    }

    /* ============================================================
       Grain
       ============================================================ */

    .grain {
      position: fixed;
      inset: 0;

      z-index: 50;

      pointer-events: none;

      opacity: 0.035;

      mix-blend-mode: soft-light;

      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
    }

    /* ============================================================
       Navigation
       ============================================================ */

    .nav-blur {
      background: rgba(17, 17, 15, 0.76);

      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    /* ============================================================
       Typography
       ============================================================ */

    .display {
      font-size: clamp(
        4rem,
        9vw,
        10rem
      );

      line-height: 0.8;

      letter-spacing: -0.065em;
    }

    .section-title {
      font-size: clamp(
        3rem,
        6.5vw,
        7rem
      );

      line-height: 0.86;

      letter-spacing: -0.06em;
    }

    .number {
      font-family: "DM Mono", monospace;

      font-size: 0.68rem;

      letter-spacing: 0.08em;
    }

    /* ============================================================
       Hero
       ============================================================ */

    .hero {
      position: relative;

      min-height: 88vh;

      overflow: hidden;

      background:
        radial-gradient(
          circle at 72% 42%,
          rgba(79, 83, 66, 0.16),
          transparent 34%
        ),
        var(--night);
    }

    #rainCanvas {
      position: absolute;
      inset: 0;

      width: 100%;
      height: 100%;

      pointer-events: none;

      opacity: 0.34;
    }

    .hero-vignette {
      position: absolute;
      inset: 0;

      pointer-events: none;

      background:
        linear-gradient(
          90deg,
          rgba(17, 17, 15, 0.95),
          rgba(17, 17, 15, 0.48) 55%,
          rgba(17, 17, 15, 0.12)
        ),
        linear-gradient(
          180deg,
          rgba(17, 17, 15, 0),
          rgba(17, 17, 15, 0.62)
        );
    }

    /* ============================================================
       Image
       ============================================================ */

    .image-frame {
      position: relative;

      overflow: hidden;

      background: #151513;

      box-shadow:
        0 40px 90px rgba(0, 0, 0, 0.28);
    }

    .image-frame img {
      display: block;

      width: 100%;
      height: 100%;

      object-fit: cover;

      filter:
        saturate(0.86)
        contrast(1.03)
        brightness(0.86);

      transition:
        transform 1000ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 700ms ease;
    }

    .image-frame:hover img {
      transform: scale(1.025);

      filter:
        saturate(0.96)
        contrast(1.04)
        brightness(0.93);
    }

    /* ============================================================
       Paper
       ============================================================ */

    .paper {
      background: var(--paper);

      color: var(--ink);
    }

    /* ============================================================
       Pills
       ============================================================ */

    .pill {
      display: inline-flex;

      padding: 0.55rem 0.8rem;

      border: 1px solid currentColor;

      border-radius: 999px;

      font-family: "DM Mono", monospace;

      font-size: 0.62rem;

      text-transform: uppercase;

      letter-spacing: 0.05em;
    }

    /* ============================================================
       Dark cards
       ============================================================ */

    .dark-card {
      background: var(--night-soft);

      border: 1px solid rgba(233, 230, 221, 0.1);
    }

    /* ============================================================
       Link
       ============================================================ */

    .line-link {
      position: relative;
    }

    .line-link::after {
      content: "";

      position: absolute;

      left: 0;
      right: 0;

      bottom: -5px;

      height: 1px;

      background: currentColor;

      transform: scaleX(0);

      transform-origin: right;

      transition:
        transform 220ms ease;
    }

    .line-link:hover::after {
      transform: scaleX(1);

      transform-origin: left;
    }

    /* ============================================================
       Button
       ============================================================ */

    .acid-button {
      display: inline-flex;

      align-items: center;

      gap: 0.7rem;

      padding: 0.85rem 1.15rem;

      border-radius: 999px;

      background: var(--acid);

      color: var(--ink);

      font-family: "DM Mono", monospace;

      font-size: 0.7rem;

      text-transform: uppercase;

      letter-spacing: 0.04em;

      transition:
        transform 180ms ease,
        box-shadow 180ms ease;
    }

    .acid-button:hover {
      transform: translateY(-2px);

      box-shadow:
        0 12px 30px rgba(200, 243, 106, 0.14);
    }

    /* ============================================================
       Mobile
       ============================================================ */

    @media (max-width: 767px) {
      .hero {
        min-height: 92vh;
      }

      .hero-vignette {
        background:
          linear-gradient(
            180deg,
            rgba(17, 17, 15, 0.08),
            rgba(17, 17, 15, 0.82)
          );
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }