:root {
    --ink: #171714;
    --paper: #e9e6dd;
    --paper-soft: #dedbd1;
    --cream: #f1eee6;

    --muted: #77756d;

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

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

    --night: #11110f;
    --night-soft: #191916;
  }

  * {
    box-sizing: border-box;
  }

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

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

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

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

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

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

  a {
    color: inherit;
    text-decoration: none;
  }

  button,
  input {
    font: inherit;
  }

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

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

  /* ============================================================
      Atmospheric 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");
  }

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

  .hero-copy {
    font-size: clamp(3.2rem, 6.4vw, 7rem);

    line-height: 0.88;

    letter-spacing: -0.055em;
  }

  .huge-serif {
    font-size: clamp(4.5rem, 11vw, 13rem);

    line-height: 0.78;

    letter-spacing: -0.06em;
  }

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

    font-size: 0.68rem;

    letter-spacing: 0.08em;
  }

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

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

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

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

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

  .hero-rain {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;

    opacity: 0.42;
  }

  .hero-vignette {
    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
      linear-gradient(90deg,
        rgba(17, 17, 15, 0.95) 0%,
        rgba(17, 17, 15, 0.58) 42%,
        rgba(17, 17, 15, 0.05) 100%),
      linear-gradient(180deg,
        rgba(17, 17, 15, 0.1),
        rgba(17, 17, 15, 0.68));
  }

  /* ============================================================
      Character image
      ============================================================ */

  .character-card {
    position: relative;

    overflow: hidden;

    background: #151513;

    box-shadow:
      0 35px 80px rgba(0, 0, 0, 0.28);
  }

  .character-card img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

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

    filter:
      saturate(0.9) contrast(1.03) brightness(0.9);
  }

  .character-card:hover img {
    transform: scale(1.025);

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

  .character-card::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
      linear-gradient(180deg,
        transparent 35%,
        rgba(0, 0, 0, 0.82) 100%);
  }

  .character-status {
    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.45rem 0.65rem;

    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(12, 12, 11, 0.45);

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

  .status-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border-radius: 999px;

    background: var(--acid);

    box-shadow:
      0 0 10px rgba(200, 243, 106, 0.65);
  }

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

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

    color: var(--ink);
  }

  /* ============================================================
      ConsentBar poster
      ============================================================ */

  .poster-frame {
    position: relative;

    overflow: hidden;

    background: #11110f;

    box-shadow:
      0 45px 100px rgba(0, 0, 0, 0.28);
  }

  .poster-frame img {
    display: block;

    width: 100%;
    height: auto;

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

    filter:
      saturate(0.94) contrast(1.02);
  }

  .poster-frame:hover img {
    transform: scale(1.012);

    filter:
      saturate(1) contrast(1.04);
  }

  .poster-frame::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    border: 1px solid rgba(255, 255, 255, 0.13);
  }

  .poster-label {
    position: absolute;

    left: 18px;
    top: 18px;

    z-index: 3;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 0.7rem;

    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(12, 12, 11, 0.48);

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

  @media (min-width: 768px) {
    .poster-label {
      left: 24px;
      top: 24px;
    }
  }

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

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

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

  /* ============================================================
      Buttons
      ============================================================ */

  .acid-button {
    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.85rem 1.15rem;

    border-radius: 999px;

    background: var(--acid);

    color: var(--ink);

    font-family: "DM Mono", monospace;

    font-size: 0.72rem;

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

  .outline-button {
    display: inline-flex;

    align-items: center;

    gap: 0.7rem;

    padding: 0.8rem 1rem;

    border: 1px solid currentColor;

    border-radius: 999px;

    font-family: "DM Mono", monospace;

    font-size: 0.72rem;

    text-transform: uppercase;

    letter-spacing: 0.04em;

    transition:
      background 180ms ease,
      color 180ms ease,
      transform 180ms ease;
  }

  .outline-button:hover {
    background: var(--cream);

    color: var(--ink);

    transform: translateY(-2px);
  }

  /* ============================================================
       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;
  }


  /* ============================================================
      Marquee
      ============================================================ */

  .marquee {
    overflow: hidden;

    white-space: nowrap;
  }

  .marquee-track {
    display: inline-flex;

    min-width: max-content;

    animation:
      marquee 30s linear infinite;
  }

  @keyframes marquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  /* ============================================================
      Terminal explanation
      ============================================================ */

  .terminal-line {
    display: grid;

    grid-template-columns: 74px 1fr;

    gap: 1rem;

    padding: 0.8rem 0;

    border-bottom: 1px solid rgba(233, 230, 221, 0.08);
  }

  .terminal-line:last-child {
    border-bottom: 0;
  }

  /* ============================================================
      Links
      ============================================================ */

  .fake-link {
    position: relative;
  }

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

    position: absolute;

    left: 0;
    right: 0;

    bottom: -4px;

    height: 1px;

    background: currentColor;

    transform-origin: right;

    transform: scaleX(0);

    transition:
      transform 250ms ease;
  }

  .fake-link:hover::after {
    transform-origin: left;

    transform: scaleX(1);
  }

  /* ============================================================
      Ambient glow
      ============================================================ */

  .ambient-glow {
    position: absolute;

    width: 40vw;
    height: 40vw;

    max-width: 620px;
    max-height: 620px;

    border-radius: 999px;

    background:
      rgba(200, 243, 106, 0.045);

    filter: blur(100px);

    pointer-events: none;
  }

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

  .mobile-menu {
    background:
      rgba(17, 17, 15, 0.94);

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

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

  @media (max-width: 767px) {
    .hero-vignette {
      background:
        linear-gradient(180deg,
          rgba(17, 17, 15, 0.12),
          rgba(17, 17, 15, 0.78));
    }

    .character-card img {
      object-position: 57% center;
    }

    .poster-label {
      font-size: 9px;
    }
  }

  /* ============================================================
      Reduced motion
      ============================================================ */

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

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

    .reveal,
    .line-reveal>span {
      opacity: 1;
      transform: none;
    }
  }