:root {
        --ink: #15110c;
        --ink-2: #1f1a13;
        --ink-3: #2b2418;
        --paper: #ece3ce;
        --paper-2: #e0d4b5;
        --paper-edge: #d2c39e;
        --paper-ink: #1c1610;
        --paper-soft: #5a4d38;
        --gold: #e7a338;
        --gold-deep: #c8851e;
        --red: #b23a2b;
        --red-deep: #922c1f;
        /* section accent (defaults to The Reel's gold; overridden per section below) */
        --accent: var(--gold);
        --accent-deep: var(--gold-deep);
        --accent-money: #5fa878;
        --accent-money-deep: #3f7d57;
        --cream: #efe7d6;
        --muted: #9a8c72;
        --line: #352c1e;
        --font-display: "Anton", "Oswald", "Arial Narrow", sans-serif;
        --font-body: "Archivo", system-ui, -apple-system, sans-serif;
        --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;
      }
      /* The Ledger page recolours the shared accent to a banknote green */
      body[data-page="ledger"] {
        --accent: var(--accent-money);
        --accent-deep: var(--accent-money-deep);
      }
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }
      html {
        -webkit-text-size-adjust: 100%;
      }
      body {
        font-family: var(--font-body);
        background: var(--ink);
        color: var(--cream);
        min-height: 100vh;
        line-height: 1.45;
        background-image:
          radial-gradient(
            120% 80% at 50% -10%,
            rgba(231, 163, 56, 0.1),
            transparent 55%
          ),
          radial-gradient(
            100% 60% at 50% 120%,
            rgba(178, 58, 43, 0.08),
            transparent 60%
          );
        background-attachment: fixed;
      }
      /* faint film-grain */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        opacity: 0.5;
        background-image: radial-gradient(
          rgba(255, 255, 255, 0.018) 1px,
          transparent 1px
        );
        background-size: 3px 3px;
      }
      .wrap {
        position: relative;
        z-index: 1;
        max-width: 1180px;
        margin: 0 auto;
        padding: clamp(20px, 4vw, 52px) clamp(16px, 4vw, 40px) 80px;
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }


      /* ---------- auth gate ----------
         A full-bleed cover, not a hidden-content trick: the page never boots
         and never touches Firestore until an allowed account is signed in. */
      body.gated {
        overflow: hidden;
      }
      .gate {
        position: fixed;
        inset: 0;
        z-index: 200;
        display: grid;
        place-items: center;
        padding: 24px;
        background: var(--ink, #0d0b08);
      }
      .gate[hidden] {
        display: none;
      }
      .gate-card {
        width: 100%;
        max-width: 380px;
        text-align: center;
        padding: 36px 30px 30px;
        background: var(--surface);
        border: 1px solid var(--edge, var(--line));
        border-radius: 12px;
      }
      .gate-ico {
        width: 32px;
        height: 32px;
        margin: 0 auto 14px;
        color: var(--accent);
      }
      .gate-ico svg {
        width: 100%;
        height: 100%;
      }
      .gate-title {
        font-family: var(--font-display);
        font-size: 30px;
        line-height: 1.05;
        text-transform: uppercase;
        color: var(--cream);
      }
      .gate-copy {
        font-size: 13.5px;
        color: var(--muted);
        margin: 10px auto 20px;
        max-width: 32ch;
        line-height: 1.55;
      }
      .gate-go {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 14px;
      }
      .gate-go svg {
        width: 17px;
        height: 17px;
        flex: none;
      }
      .gate-err {
        min-height: 16px;
        margin-top: 12px;
        font-family: var(--font-mono);
        font-size: 11px;
        color: #e8907f;
      }

      /* who is signed in, parked at the end of the section tabs */
      .auth-chip {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }
      .auth-who {
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.08em;
        color: var(--muted);
        max-width: 26ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .auth-out {
        font-family: var(--font-mono);
        font-size: 10.5px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--muted);
        background: none;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 5px 12px;
        cursor: pointer;
        transition: 0.16s;
      }
      .auth-out:hover {
        color: var(--cream);
        border-color: var(--cream);
      }

      /* ---------- the first paint ----------
         Between the sign-in gate and the first render there is a gap while
         the Firestore read is in flight. Without this the page shows an
         empty grid, which reads as "you have nothing" rather than "wait". */
      .boot {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 11px;
        padding: 76px 20px;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
      }
      .boot-spin {
        width: 15px;
        height: 15px;
        border: 2px solid var(--line);
        border-top-color: var(--muted);
        border-radius: 50%;
        animation: boot-spin 0.72s linear infinite;
      }
      @keyframes boot-spin {
        to {
          transform: rotate(360deg);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .boot-spin {
          animation-duration: 2.6s;
        }
      }