:root {
    --paper: #EFEAE0;
    --paper-2: #E4DDCC;
    --ink: #1F2A3C;
    --ink-soft: #4A5568;
    --stamp-red: #B23A2F;
    --gold: #A9803F;
    --sage: #6E7A5C;
    --line: #C9C0AC;
    --card-bg: #FBF9F4;
    --shadow: rgba(31,42,60,0.14);
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #1B1712;
      --paper-2: #241F18;
      --ink: #EFEAE0;
      --ink-soft: #C7C0AE;
      --stamp-red: #E0665A;
      --gold: #D3AE73;
      --sage: #9CAE84;
      --line: #4A4436;
      --card-bg: #241F18;
      --shadow: rgba(0,0,0,0.4);
    }
  }
  :root[data-theme="dark"] {
    --paper: #1B1712;
    --paper-2: #241F18;
    --ink: #EFEAE0;
    --ink-soft: #C7C0AE;
    --stamp-red: #E0665A;
    --gold: #D3AE73;
    --sage: #9CAE84;
    --line: #4A4436;
    --card-bg: #241F18;
    --shadow: rgba(0,0,0,0.4);
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
    line-height: 1.55;
    min-height: 100vh;
  }

  .wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
  }

  .masthead {
    text-align: center;
    margin-bottom: 2rem;
  }
  .masthead .kicker {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    color: var(--stamp-red);
    margin: 0 0 0.4rem;
  }
  .masthead h1 {
    font-size: 2.1rem;
    margin: 0 0 0.35rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .masthead p {
    color: var(--ink-soft);
    font-size: 0.98rem;
    margin: 0;
    max-width: 46ch;
    margin-inline: auto;
  }

  /* progress row of passport-style stamp slots */
  .stamps-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(46px, 1fr));
    gap: 0.6rem;
    margin: 1.8rem 0 0.6rem;
  }
  .slot {
    aspect-ratio: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--line);
    border: 2px dashed var(--line);
    position: relative;
    user-select: none;
  }
  .slot.filled {
    border: 2px solid var(--stamp-red);
    color: var(--stamp-red);
    transform: rotate(var(--tilt, -6deg));
    box-shadow: 0 0 0 3px transparent;
  }
  .slot.filled::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px solid var(--stamp-red);
    opacity: 0.55;
  }
  .progress-caption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-bottom: 2.2rem;
  }
  .progress-caption strong { color: var(--ink); }

  /* journal / story */
  .journal {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1.6rem 1.6rem 1.8rem;
    box-shadow: 0 6px 18px var(--shadow);
  }
  .journal h2 {
    font-size: 1.05rem;
    margin: 0 0 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--line);
  }
  .entry {
    display: flex;
    gap: 0.85rem;
    padding: 0.75rem 0;
    border-bottom: 1px dashed var(--line);
  }
  .entry:last-child { border-bottom: none; }
  .entry .num {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--gold);
    padding-top: 0.15rem;
    min-width: 1.6rem;
  }
  .entry.locked .num { color: var(--line); }
  .entry p {
    margin: 0;
    font-size: 0.98rem;
    white-space: pre-line;
  }
  .entry.locked p {
    color: var(--line);
    font-style: italic;
    user-select: none;
  }
  .entry.locked {
    opacity: 1;
    position: relative;
    min-height: 9rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
  .entry.locked .num {
    color: var(--stamp-red);
    font-size: 1.05rem;
    font-weight: bold;
    text-align: center;
    border: 2px solid var(--stamp-red);
    border-radius: 50%;
    min-width: 2.35rem;
    height: 2.35rem;
    line-height: 1.95rem;
    transform: rotate(-6deg);
  }
  .entry.locked .story-text {
    display: block;
    filter: blur(4px);
    opacity: 0.55;
  }
  .locked-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12rem;
    color: var(--stamp-red);
    font-family: 'Courier New', monospace;
    font-size: 1.35rem;
    font-weight: bold;
    font-style: normal;
    letter-spacing: 0.12em;
    line-height: 1.25;
    margin: 0;
    opacity: 1;
    text-align: center;
    z-index: 1;
  }

  .unlock-box {
    margin-top: 1.8rem;
    text-align: center;
    padding: 1.8rem 1.4rem;
    border: 1px solid var(--gold);
    border-radius: 4px;
    background: var(--paper-2);
  }
  .unlock-box .stamp-mark {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    color: var(--sage);
    border: 2px solid var(--sage);
    border-radius: 50%;
    padding: 0.7rem 0.5rem;
    transform: rotate(-8deg);
    margin-bottom: 1rem;
  }
  .unlock-box h3 {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
  }
  .unlock-box p {
    color: var(--ink-soft);
    font-size: 0.95rem;
    margin: 0 0 1.1rem;
  }
  .btn {
    display: inline-block;
    font-family: inherit;
    font-size: 0.98rem;
    background: var(--stamp-red);
    color: var(--paper);
    text-decoration: none;
    padding: 0.75rem 1.6rem;
    border-radius: 3px;
    border: none;
    cursor: pointer;
  }
  .btn.secondary {
    background: transparent;
    color: var(--stamp-red);
    border: 1.5px solid var(--stamp-red);
  }
  .theme-toggle {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 10;
    background: var(--card-bg);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0.5rem 0.7rem;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 10px var(--shadow);
  }
  .theme-toggle:hover { border-color: var(--stamp-red); color: var(--stamp-red); }
  .language-toggle {
    position: fixed;
    top: 1rem;
    right: 7.5rem;
    z-index: 10;
    background: var(--card-bg);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 0.5rem 0.7rem;
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    box-shadow: 0 3px 10px var(--shadow);
  }
  .language-toggle:hover { border-color: var(--stamp-red); color: var(--stamp-red); }
  .page-nav, .page-actions { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.2rem; }
  .page-nav .btn, .page-actions .btn { font-size: 0.86rem; padding: 0.55rem 0.9rem; }
  .content-page { max-width: 680px; margin: 0 auto; padding: 3.5rem 1.25rem 4rem; }
  .content-page .kicker, .admin-wrap .kicker { color: var(--stamp-red); font-family: 'Courier New', monospace; font-size: 0.72rem; letter-spacing: 0.14em; }
  .content-page h1 { font-size: 2.4rem; line-height: 1.1; margin: 0.4rem 0 1rem; }
  .content-page .lead { color: var(--ink-soft); font-size: 1.15rem; max-width: 48ch; }
  .prose { max-width: 60ch; margin-top: 2rem; }
  .prose p { margin: 0 0 1.1rem; }
  .stories-list { margin-top: 2rem; }
  .member-story { display: flex; gap: 1rem; border-top: 1px solid var(--line); padding: 1.2rem 0; }
  .member-number { color: var(--gold); font-family: 'Courier New', monospace; }
  .member-story h2 { font-size: 1.1rem; margin: 0 0 0.35rem; }
  .member-story p { margin: 0; color: var(--ink-soft); }
  .members-directory { margin-top: 2.5rem; }
  .members-directory h2 { font-size: 1.1rem; margin: 0.4rem 0 1rem; }
  .people-group { margin-top: 1.8rem; }
  .people-group h3 { color: var(--gold); font-family: 'Courier New', monospace; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; margin: 0; }
  .member-card { border-top: 1px solid var(--line); padding: 1rem 0; }
  .member-name { color: var(--stamp-red); font-size: 1.2rem; font-weight: 600; }
  .member-card p { color: var(--ink-soft); margin: 0.2rem 0 0; }
  .member-details { margin-top: 2.5rem; }
  .member-detail { border-top: 1px solid var(--line); padding: 2rem 0; scroll-margin-top: 1rem; }
  .member-detail h2 { font-size: 1.5rem; margin: 0.35rem 0; }
  .member-detail .member-intro { color: var(--ink-soft); font-style: italic; margin-top: 0; }
  .member-detail > p:not(.kicker):not(.member-intro) { white-space: pre-line; }
  .back-link { color: var(--stamp-red); font-size: 0.86rem; }
  .person-story { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 2rem; padding: 1.5rem 0; }
  .person-story p { margin: 0; white-space: pre-line; }
  .person-actions { justify-content: flex-start; }

  footer {
    text-align: center;
    margin-top: 2.4rem;
    font-size: 0.78rem;
    color: var(--ink-soft);
  }
  footer a { color: var(--ink-soft); }
  footer button.linklike {
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: var(--ink-soft); text-decoration: underline;
    cursor: pointer; opacity: 0.7;
  }

  /* stamp-collection screen */
  .collect-screen {
    min-height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
  }
  .big-stamp {
    width: 132px;
    height: 132px;
    border-radius: 50%;
    border: 4px solid var(--stamp-red);
    color: var(--stamp-red);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    transform: rotate(-8deg);
    animation: stampdown 0.42s cubic-bezier(.2,1.4,.4,1);
    margin-bottom: 1.6rem;
  }
  .big-stamp .no { font-size: 2.2rem; font-weight: bold; line-height: 1; }
  .big-stamp .label { font-size: 0.65rem; letter-spacing: 0.1em; margin-top: 0.25rem; }
  @keyframes stampdown {
    0% { transform: scale(2.4) rotate(-8deg); opacity: 0; }
    60% { transform: scale(0.94) rotate(-8deg); opacity: 1; }
    100% { transform: scale(1) rotate(-8deg); opacity: 1; }
  }
  .collect-screen h1 { font-size: 1.5rem; margin: 0 0 0.6rem; }
  .collect-screen .story-line {
    max-width: 42ch;
    color: var(--ink-soft);
    font-style: italic;
    margin-bottom: 1.8rem;
    white-space: pre-line;
  }
  .already-note {
    font-size: 0.85rem;
    color: var(--ink-soft);
    margin-bottom: 1.8rem;
  }

  /* admin / QR page */
  .admin-wrap { max-width: 760px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
  .admin-page { display: grid; place-items: center; padding: 1.5rem; }
  .admin-shell { width: min(100%, 760px); }
  .login-panel, .admin-dashboard { background: var(--card-bg); border: 1px solid var(--line); border-radius: 4px; padding: 2rem; box-shadow: 0 6px 18px var(--shadow); }
  .login-panel { width: min(100%, 430px); margin: 0 auto; }
  .login-panel h1, .admin-dashboard h1 { margin-top: 0; }
  .login-panel form { display: grid; gap: 0.65rem; margin-top: 1.5rem; }
  .login-panel label { font-size: 0.85rem; color: var(--ink-soft); }
  .login-panel input { width: 100%; font: inherit; padding: 0.7rem; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); color: var(--ink); }
  .login-error { color: var(--stamp-red); margin: 0.25rem 0 0; }
  .admin-wrap h1 { font-size: 1.4rem; }
  .admin-wrap h2 { font-size: 1.1rem; margin-top: 2rem; }
  .admin-panel { background: var(--card-bg); border: 1px solid var(--line); border-radius: 4px; padding: 1rem; margin: 1rem 0 2rem; }
  .admin-panel p { color: var(--ink-soft); margin-top: 0; }
  .stamp-controls { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1rem 0; }
  .stamp-toggle { background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 3px; padding: 0.5rem 0.65rem; cursor: pointer; font-family: 'Courier New', monospace; font-size: 0.75rem; }
  .stamp-toggle.is-added { background: var(--sage); color: var(--paper); border-color: var(--sage); }
  .admin-controls {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    align-items: center; margin-bottom: 1.5rem;
  }
  .admin-controls input {
    flex: 1; min-width: 220px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--card-bg);
    color: var(--ink);
  }
  .qr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
  }
  .qr-card {
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 0.8rem;
    text-align: center;
  }
  .qr-card .qr-target { display: flex; justify-content: center; margin-bottom: 0.5rem; }
  .qr-card .qr-target img, .qr-card .qr-target canvas { width: 100%; height: auto; }
  .qr-card .cap { font-family: 'Courier New', monospace; font-size: 0.78rem; color: var(--ink-soft); }
  @media print {
    .admin-controls, footer, .no-print, .page-actions { display: none !important; }
    body { background: white; }
  }

  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  @media (prefers-reduced-motion: reduce) {
    .big-stamp { animation: none; }
  }