@font-face {
      font-family: "Space Mono"; font-weight: 400; font-style: normal;
      font-display: swap; src: url("./fonts/space-mono-latin-400-normal.woff2") format("woff2");
    }
    @font-face {
      font-family: "Space Mono"; font-weight: 700; font-style: normal;
      font-display: swap; src: url("./fonts/space-mono-latin-700-normal.woff2") format("woff2");
    }
    @font-face {
      font-family: "Libre Franklin"; font-weight: 400; font-style: normal;
      font-display: swap; src: url("./fonts/libre-franklin-latin-400-normal.woff2") format("woff2");
    }
    @font-face {
      font-family: "Libre Franklin"; font-weight: 600; font-style: normal;
      font-display: swap; src: url("./fonts/libre-franklin-latin-600-normal.woff2") format("woff2");
    }

    :root {
      --board: #0B0C0F;
      --bone: #F2EFE6;
      --amber: #F4B23C;
      --muted: #989DA8;
      --line: rgba(255,255,255,0.10);
      --board-font: "Space Mono", ui-monospace, Menlo, monospace;
      --body: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }

    body {
      min-height: 100vh;
      font-family: var(--body);
      color: var(--bone);
      background: var(--board);
      background-image: radial-gradient(120% 50% at 50% -10%, rgba(244,178,60,0.12), transparent 55%);
      line-height: 1.62;
      -webkit-font-smoothing: antialiased;
    }

    main {
      max-width: 640px;
      margin: 0 auto;
      padding: clamp(2.5rem, 8vh, 5rem) clamp(1.25rem, 5vw, 2rem) 4rem;
    }

    .back {
      font-family: var(--board-font);
      font-size: 0.8rem;
      letter-spacing: 0.06em;
      color: var(--amber);
      text-decoration: none;
      display: inline-block;
      margin-bottom: clamp(1.75rem, 5vh, 2.75rem);
    }
    .back:hover { color: var(--bone); }
    .back:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

    .eyebrow {
      font-family: var(--board-font);
      font-size: 0.72rem;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--amber);
      margin-bottom: 0.9rem;
    }

    h1 {
      font-family: var(--body);
      font-weight: 600;
      font-size: clamp(1.9rem, 6vw, 2.6rem);
      line-height: 1.08;
      letter-spacing: -0.02em;
      margin-bottom: 1.1rem;
    }

    .intro { font-size: 1.02rem; color: var(--bone); max-width: 60ch; margin-bottom: 2.5rem; }

    h2 {
      font-family: var(--board-font);
      font-weight: 700;
      font-size: 0.92rem;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--amber);
      margin: 2.25rem 0 0.8rem;
    }

    p { color: var(--muted); margin-bottom: 1rem; max-width: 62ch; }
    p strong { color: var(--bone); font-weight: 600; }

    ul { list-style: none; margin: 0 0 1rem; max-width: 62ch; }
    li { color: var(--muted); padding-left: 1.4rem; position: relative; margin-bottom: 0.55rem; }
    li::before { content: "›"; position: absolute; left: 0; color: var(--amber); font-family: var(--board-font); }

    a.inline {
      color: var(--bone);
      text-decoration: none;
      border-bottom: 1px solid var(--amber);
      padding-bottom: 1px;
      transition: color 0.15s ease;
    }
    a.inline:hover { color: var(--amber); }
    a.inline:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

    .sources { margin-top: 0.5rem; }
    .sources li { margin-bottom: 0.7rem; }
    .sources li::before { content: "→"; }

    .rule { height: 1px; background: var(--line); margin: 2.75rem 0 2rem; }

    .fineprint { font-family: var(--board-font); font-size: 0.74rem; line-height: 1.7; color: var(--muted); max-width: 64ch; }