:root {
  --paper: #F6F1E7; --ink: #2A241E; --muted: #6E6357; --gold: #A8803F; --gold-soft: #E9DCC3;
  --dark: #1C1814; --card: #FFFBF3; --line: #DDD0B8;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1C1814; --ink: #EFE6D6; --muted: #B3A792; --gold: #C9A25E; --gold-soft: #3A3125; --card: #251F19; --line: #3F3528; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 20px/1.6 "Source Sans 3", system-ui, sans-serif;
  padding-bottom: env(safe-area-inset-bottom);
}
.top {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
  background: var(--dark); color: #E9DCC3; padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
  border-bottom: 2px solid #C9A25E;
}
.brand { font: italic 400 22px "Gelasio", Georgia, serif; letter-spacing: .02em; color: #C9A25E; }
.top .link { color: #E9DCC3; }
main { max-width: 640px; margin: 0 auto; padding: 28px 20px 60px; }
.screen.center { text-align: center; padding-top: 30vh; }
h1 { font: 600 32px/1.25 "Gelasio", Georgia, serif; margin: 6px 0 18px; }
h2 { font: 600 24px "Gelasio", Georgia, serif; margin: 44px 0 10px; }
.kicker { color: var(--gold); font-weight: 600; letter-spacing: .04em; margin: 0; font-size: 17px; text-transform: uppercase; }
.muted { color: var(--muted); } .small { font-size: 17px; }
label { display: block; font-weight: 600; margin: 18px 0 8px; }
input[type=email], input[inputmode=numeric] {
  width: 100%; font: inherit; font-size: 22px; padding: 16px; border-radius: 12px;
  border: 2px solid var(--line); background: var(--card); color: var(--ink);
}
input:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
#otp { letter-spacing: .3em; text-align: center; font-size: 28px; }
button, .button { font: 600 20px "Source Sans 3", sans-serif; cursor: pointer; }
.primary, .secondary {
  display: block; width: 100%; min-height: 60px; margin-top: 18px; border-radius: 14px; text-align: center;
  text-decoration: none; padding: 16px; border: 2px solid var(--gold);
}
.primary { background: var(--dark); color: #F3E7CF; border-color: var(--dark); }
@media (prefers-color-scheme: dark) { .primary { background: var(--gold); color: #1C1814; border-color: var(--gold); } }
.secondary { background: transparent; color: var(--ink); }
.link { background: none; border: 0; color: var(--gold); text-decoration: underline; padding: 14px 0; font-size: 18px; }
.note { min-height: 1.6em; color: var(--muted); }
.note.err { color: #A6402F; }
.player {
  display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: 18px; padding: 16px; margin: 8px 0 26px;
}
.play {
  flex: none; width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--dark); display: grid; place-items: center;
}
@media (prefers-color-scheme: dark) { .play { background: var(--gold); } .play svg { fill: #1C1814 !important; } }
.play svg { width: 34px; height: 34px; fill: #F3E7CF; }
.ptext { flex: 1; min-width: 0; }
.plabel { font-weight: 600; margin-bottom: 6px; }
#seek { width: 100%; accent-color: var(--gold); height: 28px; }
.letter { font: 400 22px/1.75 "Gelasio", Georgia, serif; }
.letter p { margin: 0 0 1em; }
.sign { font: italic 400 21px/1.5 "Gelasio", Georgia, serif; color: var(--muted); margin-top: 24px; }
.card { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 16px 18px; margin-top: 30px; }
.card p { margin: 0; }
.archive { list-style: none; padding: 0; margin: 0; }
.archive li button {
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 16px 4px; color: var(--ink); font: 400 20px "Source Sans 3", sans-serif; min-height: 56px;
}
.archive .d { color: var(--gold); font-weight: 600; margin-right: 10px; }