:root {
    --paper:      #f6f7f8;
    --ink:        #16181c;
    --ink-muted:  #6b7076;
    --rule:       #dcdfe2;
    --accent:     #3f5a6b;
    --leaf-a:     #e8d9c8;
    --leaf-b:     #e2d0bf;
    --heart:      #c0392b;
    /* Cursors from the Micro Icon Pack by shmorgus. The sprites are cropped to
       their artwork and scaled 3x. Keep any replacement at 32x32 or under:
       past that size some browsers drop a custom cursor and fall back to the
       system one. The two numbers after each url() are the hotspot, the arrow
       pointing from its tip and the hand from its fingertip. Swap the data
       URIs and these numbers to use the game's own cursors later. */
    --cursor:      url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAYCAYAAAD3Va0xAAAAWUlEQVR42mNUUVD/z0AA3Hlwk5GQGiYGKgGqGcSI7LVtezfCJbyc/Uny5hDyGjIgxptD1GvEeHPweY2FVA24Eu0w8FrrjG3DKdaQvXN09cyhWEKSCgZ3MQIAJwAjS/s9n64AAAAASUVORK5CYII=") 0 0;
    --cursor-link: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAiUlEQVR42mNkwAFUFNT/YxO/8+AmIwMJgImBxoDmFrAQo2jb3o1wtpez/39SgmuEBBExKQ1XcA39IGLElaFwpSJcwMvZH2tmHGapCC1DYdXQOmMbnF2d4QVnW4emIxStnvl/mAYRsvdxpRzkYEFWP3zLIpwZDSVVEAGOrp45XIOImIqeVDC8yiIAHfMuZY9NT/MAAAAASUVORK5CYII=") 6 0;

    --serif:  "Newsreader", Georgia, "Times New Roman", serif;
    --sans:   "Karla", "Helvetica Neue", Arial, sans-serif;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --paper:     #14161a;
      --ink:       #e6e8ea;
      --ink-muted: #8b9196;
      --rule:      #2a2e34;
      --accent:    #9db9c9;
      --leaf-a:    #3d352e;
      --leaf-b:    #37312c;
      --heart:     #e2554a;
    }
  }

  /* Pixel-art backdrop: a few leaves falling. */
  canvas.bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
  }

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

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    padding-block: clamp(3.5rem, 12vh, 8rem) clamp(3rem, 10vh, 6rem);
    padding-inline: clamp(1.25rem, 6vw, 3rem);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    cursor: var(--cursor), auto;
  }

  a, button { cursor: var(--cursor-link), pointer; }

  main {
    max-width: 33rem;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
  }

  .kicker {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ink-muted);
  }

  h1 {
    margin: 0.35rem 0 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 9vw, 3.9rem);
    line-height: 1.02;
    letter-spacing: -0.022em;
    text-wrap: balance;
  }

  .lede {
    margin: 0;
    font-family: var(--serif);
    font-weight: 300;
    font-size: clamp(1.15rem, 3.2vw, 1.35rem);
    line-height: 1.5;
    text-wrap: pretty;
  }

  .prose { display: flex; flex-direction: column; gap: 1.15rem; }
  .prose p { margin: 0; text-wrap: pretty; }

  dl.facts {
    margin: 0;
    padding-block: 1.4rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    display: grid;
    grid-template-columns: minmax(5rem, max-content) 1fr;
    column-gap: 1.5rem;
    row-gap: 0;
    align-items: baseline;
  }

  dl.facts dt {
    padding-block: 0.35rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-muted);
  }

  dl.facts dd {
    margin: 0;
    padding-block: 0.35rem;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 26rem) {
    dl.facts { grid-template-columns: 1fr; }
    dl.facts dt { padding-top: 0.8rem; padding-bottom: 0; }
    dl.facts dt:first-of-type { padding-top: 0; }
  }

  .contact p { margin: 0 0 0.9rem; }
  .contact p:last-child { margin-bottom: 0; }

  a {
    color: var(--accent);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transition: text-decoration-color 120ms linear;
  }
  a:hover { text-decoration-color: var(--accent); }
  a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  footer {
    padding-top: 1.75rem;
    border-top: 1px solid var(--rule);
    font-size: 0.875rem;
    color: var(--ink-muted);
  }
  footer p { margin: 0; }

  .reveal.in {
    animation: rise 620ms cubic-bezier(0.22, 0.68, 0.32, 1) both;
  }

  /* Reading one paragraph pushes the others back. */
  @media (hover: hover) and (pointer: fine) {
    .focusable {
      transform-origin: left center;
      transition: opacity 260ms ease, filter 260ms ease, transform 260ms ease;
    }
    main:has(.focusable:hover) .focusable {
      opacity: 0.4;
      filter: blur(1.3px);
    }
    main:has(.focusable:hover) .focusable:hover,
    main:has(.focusable:hover) dt:hover + dd,
    main:has(.focusable:hover) dt:has(+ dd:hover) {
      opacity: 1;
      filter: none;
      transform: scale(1.012);
    }

    /* The language button pushes the text back the same way, and calls the
       arrow back while it is hovered, even once the first-visit nudge is done. */
    body:has(.lang:hover) .focusable {
      opacity: 0.4;
      filter: blur(1.3px);
    }
    body:has(.lang:hover) .hint { opacity: 0.8; }
    .lang:hover { transform: scale(1.06); }
  }

  @keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }

  .lang {
    position: fixed;
    z-index: 2;
    top: clamp(0.9rem, 2.5vh, 1.6rem);
    right: clamp(0.9rem, 3vw, 1.6rem);
    padding: 0.34rem 0.6rem;
    font-family: var(--sans);
    font-size: 0.8125rem;
    line-height: 1;
    color: var(--ink-muted);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 3px;
    cursor: pointer;
    transition: color 120ms linear, border-color 120ms linear, transform 260ms ease;
  }
  .lang:hover { color: var(--ink); border-color: var(--ink-muted); }
  .lang:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }
  html:not(.js) .lang { display: none; }

  /* First-visit nudge toward the language button. */
  .hint {
    position: fixed;
    z-index: 1;
    top: calc(clamp(0.9rem, 2.5vh, 1.6rem) + 2rem);
    right: clamp(0.9rem, 3vw, 1.6rem);
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
    color: var(--ink-muted);
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease;
  }
  .hint.show { opacity: 0.8; }

  .hint span {
    padding-bottom: 0.2rem;
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1;
    white-space: nowrap;
  }

  .hint svg {
    width: 3.1rem;
    height: 2.3rem;
    flex: none;
  }
  .hint.show svg { animation: nudge 2.8s ease-in-out infinite; }

  @keyframes nudge {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50%      { transform: translate(2px, -3px) rotate(-3deg); }
  }

  .heart {
    display: inline-block;
    color: var(--heart);
    opacity: 0.6;
    font-size: 1.05em;
    vertical-align: -0.02em;
    animation: beat 2.4s ease-in-out infinite;
  }

  /* lub-dub, then a rest. */
  @keyframes beat {
    0%, 30%, 100% { transform: scale(1); }
    8%           { transform: scale(1.16); }
    16%          { transform: scale(1); }
    23%          { transform: scale(1.09); }
  }

  @media (prefers-reduced-motion: reduce) {
    .heart { animation: none; }
    .reveal.in { animation: none; }
    .hint.show svg { animation: none; }
    .lang:hover { transform: none; }
    main:has(.focusable:hover) .focusable:hover,
    main:has(.focusable:hover) dt:hover + dd,
    main:has(.focusable:hover) dt:has(+ dd:hover) { transform: none; }
  }