/* ---- Lora, served from this site rather than from Google ----
   The font used to be fetched from fonts.googleapis.com. Two problems with
   that: privacy blockers and some networks block it outright, which dropped
   the whole app back to a default serif and made printed keepsakes come out
   in Times; and it meant every page load told a third party that somebody was
   reading a memoir, which sits badly next to the promise on the front page.
   These are the same files Google serves, kept here instead. One variable
   font covers every weight from 400 to 600, so the whole family is 91 KB. */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/lora-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/lora-latin-ext-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --linen: #EEF0E6;
  --page: #FFFFFF;
  --ink: #24332A;
  --olive: #6F7A62;
  --moss: #D9DDCB;
  --marigold: #D99A2B;
  --marigold-dark: #B87F1B;
  --rose: #B5563E;
  --font: 'Lora', Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { font-size: 20px; }
body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 700px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

/* Top bar */
.top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0 1.5rem; gap: 1rem;
}
.brand { font-weight: 600; font-size: 1.1rem; letter-spacing: 0.01em; }
.brand small { display: block; font-weight: 400; font-size: 1rem; color: var(--olive); }

h1 { font-size: 2rem; line-height: 1.2; font-weight: 500; margin: 0 0 0.75rem; }
h2 { font-size: 1.5rem; line-height: 1.25; font-weight: 500; margin: 0 0 0.5rem; }
p { margin: 0 0 1rem; }
.muted { color: var(--olive); }
.lead { font-size: 1.15rem; }

/* Buttons: big, obvious, one job */
button {
  font-family: var(--font); font-size: 1.05rem; line-height: 1.2;
  min-height: 60px; padding: 0.9rem 1.5rem; border-radius: 14px;
  border: 2px solid var(--ink); background: var(--page); color: var(--ink);
  cursor: pointer; width: 100%; text-align: center;
}
button:focus-visible { outline: 4px solid var(--marigold); outline-offset: 3px; }
button:disabled { opacity: 0.5; cursor: default; }
.primary { background: var(--marigold); border-color: var(--marigold); color: var(--ink); font-weight: 600; }
.primary:hover:not(:disabled) { background: var(--marigold-dark); border-color: var(--marigold-dark); }
.quiet { border-color: var(--moss); background: transparent; }
.quiet:hover { background: var(--moss); }
.link { border: none; background: none; min-height: 0; padding: 0.25rem 0; width: auto; text-decoration: underline; text-underline-offset: 4px; color: var(--olive); font-size: 1rem; }
.stack { display: flex; flex-direction: column; gap: 0.75rem; }
.row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.row > * { flex: 1 1 200px; }

input[type=text], textarea {
  font-family: var(--font); font-size: 1.2rem; width: 100%;
  padding: 1rem; border: 2px solid var(--ink); border-radius: 14px;
  background: var(--page); color: var(--ink); line-height: 1.5;
}
input[type=text]:focus, textarea:focus { outline: 4px solid var(--marigold); outline-offset: 2px; }
textarea { min-height: 200px; resize: vertical; }

/* The book */
.book {
  background: var(--page); border-radius: 18px; padding: 2rem 1.75rem;
  box-shadow: 0 1px 0 var(--moss), 0 8px 0 -4px var(--moss);
}
.chapter-list { list-style: none; margin: 0; padding: 0; }
.chapter-list li { border-top: 1px solid var(--moss); }
.chapter-list li:first-child { border-top: none; }
.chapter-btn {
  border: none; border-radius: 0; background: none; text-align: left;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0.25rem; min-height: 0;
}
.chapter-btn:hover { background: var(--linen); }
.chapter-btn .name { font-size: 1.15rem; font-weight: 500; }
.chapter-btn .count { color: var(--olive); font-size: 1rem; white-space: nowrap; }

/* Interview */
.question {
  font-size: 1.75rem; line-height: 1.3; font-weight: 500;
  margin: 1.5rem 0 1.5rem; min-height: 4.5rem;
}
.mic {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
}
.mic.listening { background: var(--rose); border-color: var(--rose); color: #fff; }
.dot { width: 14px; height: 14px; border-radius: 50%; background: currentColor; }
.listening .dot { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { .listening .dot { animation: none; } }
.hint { font-size: 1rem; color: var(--olive); margin-top: 0.5rem; }

/* Story */
.story { padding: 1.5rem 0; border-top: 1px solid var(--moss); }
.story:first-of-type { border-top: none; padding-top: 0; }
.story h3 { font-size: 1.35rem; font-weight: 500; margin: 0 0 0.5rem; }
.story .body p { font-size: 1.1rem; }
.story .tools { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; }

.notice { background: var(--moss); border-radius: 14px; padding: 1rem 1.25rem; margin: 1rem 0; }
.notice.error { background: #F3D9D2; }
.working { color: var(--olive); font-style: italic; }
.progress-note { font-size: 1rem; color: var(--olive); margin-bottom: 1rem; }

/* Print: only the book */
@media print {
  body { background: #fff; font-size: 13pt; }
  .no-print { display: none !important; }
  .book { box-shadow: none; padding: 0; }
  .wrap { max-width: none; padding: 0; }
  .story { page-break-inside: avoid; }
}

/* ---- Additions for production screens. Same tokens, same look. ---- */
/* Nothing on any screen is under 20px. The prototype used 0.95rem (19px) for
   hints, counts and quiet links, and 0.8rem (16px) for the byline. Those are
   raised to 1rem above. It is a small change to the look, made because the
   20px floor is a hard requirement for readers in their sixties to eighties. */
/* Email and number inputs must match the text inputs exactly. */
input[type=email], input[type=tel] {
  font-family: var(--font); font-size: 1.2rem; width: 100%;
  padding: 1rem; border: 2px solid var(--ink); border-radius: 14px;
  background: var(--page); color: var(--ink); line-height: 1.5;
}
input[type=email]:focus, input[type=tel]:focus { outline: 4px solid var(--marigold); outline-offset: 2px; }

/* Settings rows reuse the chapter-list look. */
.setting-row { border-top: 1px solid var(--moss); padding: 1.25rem 0; }
.setting-row:first-child { border-top: none; padding-top: 0; }
.setting-row h2 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.setting-row p { font-size: 1rem; color: var(--olive); margin-bottom: 0.75rem; }

/* The privacy promise on the welcome screen. */
.promise { font-size: 1rem; color: var(--olive); margin-top: 1.5rem; }

/* Danger button for account deletion. Still 60px, still words not icons. */
.danger { border-color: var(--rose); color: var(--rose); }
.danger:hover:not(:disabled) { background: var(--rose); color: #fff; }

/* Loading state while we check who is signed in. */
.loading { text-align: center; padding: 3rem 0; color: var(--olive); font-style: italic; }

/* Legal pages: plain readable prose at the same size as everything else. */
.legal h2 { margin-top: 2rem; }
.legal li { margin-bottom: 0.5rem; }

/* ---- Phones ----
   On a narrow screen the chapter name and its "2 stories" count fought each
   other for room, squeezing "Young adult years" onto three lines. Below this
   width the count simply sits under the name, and the page gets a little of
   its side padding back. Nothing changes on a tablet or a computer. */
@media (max-width: 520px) {
  .wrap { padding-left: 1rem; padding-right: 1rem; }
  .book { padding: 1.5rem 1.25rem; }
  .chapter-btn {
    flex-direction: column; align-items: flex-start; gap: 0.15rem;
    padding: 0.9rem 0.25rem;
  }
  .chapter-btn .count { white-space: normal; }
  h1 { font-size: 1.75rem; }
  .question { font-size: 1.5rem; }
}

/* ---- The preview of the printed book, shown before paying ----
   These are pictures of the book, not the book itself. The title page is
   faithful to the PDF. The story page is set at normal reading size rather
   than shrunk to true scale, because a preview nobody can read is no use to
   a reader of seventy-five. */
.preview { margin: 1.5rem 0 0; }
.preview-caption { font-size: 1rem; color: var(--olive); margin: 0 0 0.75rem; }
.paper {
  background: var(--page);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(36,51,42,0.10), 0 12px 28px -8px rgba(36,51,42,0.28);
  padding: 2.5rem 2rem;
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.paper-title {
  aspect-ratio: 8.5 / 11;
  min-height: 380px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.paper-title .who { font-size: 2rem; font-weight: 600; line-height: 1.15; margin: 0 0 0.6rem; }
.paper-title .what { font-style: italic; color: var(--olive); font-size: 1.05rem; margin: 0 0 0.35rem; }
.paper-title .born { color: var(--olive); font-size: 1rem; margin: 0; }
.paper-title .rule { width: 120px; height: 1px; background: var(--moss); margin: 1.75rem 0 0; }
.paper-title .made { position: absolute; bottom: 1.75rem; left: 0; right: 0; color: var(--olive); font-size: 1rem; }

.paper-page h4 {
  font-size: 1.4rem; font-weight: 600; margin: 0 0 0.6rem;
  padding-bottom: 0.6rem; border-bottom: 1px solid var(--moss);
}
.paper-page h5 { font-size: 1.15rem; font-weight: 600; margin: 1.25rem 0 0.4rem; }
.paper-page p { font-size: 1rem; line-height: 1.7; margin: 0 0 0.9rem; }
.paper-page { padding-bottom: 4.5rem; }
/* The last of the text fades, to say plainly that there is more than this. */
.paper-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 130px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--page) 80%);
}
.paper-more {
  position: absolute; left: 0; right: 0; bottom: 1.2rem;
  text-align: center; color: var(--olive); font-size: 1rem;
}

@media (max-width: 520px) {
  .paper { padding: 1.75rem 1.25rem; }
  .paper-page { padding-bottom: 4rem; }
  .paper-title { min-height: 300px; }
  .paper-title .who { font-size: 1.6rem; }
}

/* Anything still to be filled in on the legal pages, marked so it cannot be
   published by accident without somebody noticing. */
.legal mark.todo {
  background: #F3D9D2; color: var(--rose);
  padding: 0.1em 0.3em; border-radius: 4px; font-style: normal;
}
.legal hr { border: none; border-top: 1px solid var(--moss); margin: 2rem 0; }
.legal h3 { font-size: 1.25rem; font-weight: 600; margin: 1.75rem 0 0.5rem; }
.legal ul { padding-left: 1.5rem; }