:root {
  --paper: #f3eee4;
  --sheet: #fbf8f2;
  --ink: #1c1a16;
  --muted: #5b554b;
  --rule: #d9cfbd;
  --lane: #b3321f;
  --lane-ink: #8e2616;
  --wood: #b98543;
  --ok: #2f5d3a;
  --display: "Anybody", "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", Verdana, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.6;
}
main { max-width: 60rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem) 6rem; }
h1, h2, h3 { font-family: var(--display); font-stretch: 112%; line-height: 1.05; text-wrap: balance; margin: 0; }
p { text-wrap: pretty; overflow-wrap: anywhere; }

/* Masthead: type only, the pin stripe underneath */
.mast { padding: clamp(2.5rem, 7vw, 5rem) 0 2.5rem; position: relative; }
.mast::after {
  content: ""; display: block; height: 14px; margin-top: 2.5rem;
  border-top: 4px solid var(--lane); border-bottom: 4px solid var(--lane);
  max-width: 11rem;
}
.kicker { font-family: var(--display); font-weight: 800; color: var(--lane); margin: 0 0 1rem; font-size: 1.05rem; }
h1 { font-size: clamp(2.3rem, 1.4rem + 4.4vw, 4.6rem); font-weight: 800; max-width: 16ch; }
.how { margin-top: 1.75rem; max-width: 42rem; }
.how p { margin: 0 0 0.9rem; }
.key-line { color: var(--muted); }
.tok { font-family: var(--body); font-weight: 700; color: var(--wood); }
.gap { font-weight: 700; color: var(--lane-ink); }

.loading, .fail { font-size: 1.25rem; color: var(--muted); padding: 2rem 0; }

/* A sequence */
.seq { margin-top: 3.5rem; }
.seq:first-child { margin-top: 0.5rem; }
.seq-head { border-top: 2px solid var(--ink); padding-top: 1.25rem; margin-bottom: 1.5rem; }
.seq-head p { max-width: 42rem; }
.seq-head h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); font-weight: 800; }
.seq-head p { margin: 0.6rem 0 0; color: var(--muted); }

/* One email: the day as a frame number, the sheet beside it */
.frame {
  display: grid;
  grid-template-columns: minmax(4.5rem, 7.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}
.day { text-align: right; padding-top: 0.35rem; }
.day .label { display: block; font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--muted); }
.day .num { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 2rem + 3vw, 4.4rem); line-height: 0.9; color: var(--lane); }
.day .ord { display: block; margin-top: 0.4rem; font-size: 0.95rem; color: var(--muted); }

.sheet {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-left: 5px solid var(--wood);
  padding: clamp(1rem, 3vw, 1.75rem);
}
.field-label { display: block; font-family: var(--display); font-weight: 700; font-size: 0.95rem; color: var(--muted); margin-bottom: 0.35rem; }
input[type="text"], textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid var(--rule); border-radius: 3px; padding: 0.7rem 0.85rem;
}
input[type="text"]:focus, textarea:focus { outline: 3px solid var(--wood); outline-offset: 1px; border-color: var(--wood); }
.subject { font-weight: 700; margin-bottom: 1.1rem; }
textarea { resize: vertical; min-height: 6rem; line-height: 1.55; field-sizing: content; }
.body-area { min-height: 12rem; }

.row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin: 1rem 0 0; }
.good {
  display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
  font-weight: 700; font-size: 1.05rem; user-select: none;
}
.good input { width: 1.6rem; height: 1.6rem; accent-color: var(--ok); margin: 0; }
.good.on { color: var(--ok); }
.reset {
  font: inherit; font-size: 0.98rem; background: none; border: 0; padding: 0.25rem 0;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.reset[hidden] { display: none; }

.note { margin-top: 1.25rem; padding-top: 1.1rem; border-top: 1px dashed var(--rule); }

/* Talk: a squared button, lane red, never a pill */
.talkrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 0.6rem; }
.talk {
  font-family: var(--display); font-weight: 800; font-size: 1.1rem; letter-spacing: 0.01em;
  background: var(--lane); color: #fff; border: 0; border-radius: 3px;
  padding: 0.7rem 1.3rem; min-height: 3rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.talk:hover { background: var(--lane-ink); }
.talk:focus-visible { outline: 3px solid var(--wood); outline-offset: 2px; }
.talk .dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #fff; }
.talk.live { background: var(--ink); }
.talk.live .dot { background: var(--lane); animation: blink 1s steps(2, start) infinite; }
.talk[disabled] { opacity: 0.6; cursor: progress; }
.talkstate { font-size: 1rem; color: var(--muted); }
.talkstate.err { color: var(--lane-ink); font-weight: 700; }
@keyframes blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .talk.live .dot { animation: none; } }

/* Questions: a numbered list with hairlines */
.questions { margin-top: 4.5rem; }
.questions > h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; max-width: 20ch; }
.questions > p { max-width: 42rem; color: var(--muted); margin: 0.8rem 0 0; }
.qgroup { font-family: var(--display); font-weight: 800; color: var(--lane); margin: 2.5rem 0 0; font-size: 1.1rem; }
.q {
  display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0 1.25rem;
  padding: 1.5rem 0; border-bottom: 1px solid var(--rule); max-width: 54rem;
}
.q .n { font-family: var(--display); font-weight: 800; font-size: 2.2rem; line-height: 1; color: var(--wood); }
.q h3 { font-family: var(--body); font-size: 1.2em; font-weight: 700; line-height: 1.35; text-wrap: pretty; max-width: 36rem; }
.q .why { margin: 0.35rem 0 0.8rem; color: var(--muted); }

.finish { margin-top: 4rem; max-width: 46rem; border-top: 2px solid var(--ink); padding-top: 1.5rem; }
.finish h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 800; }
.finish p { margin: 0.6rem 0 1rem; }
.done {
  margin-top: 1.25rem; font-family: var(--display); font-weight: 800; font-size: 1.2rem;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 3px;
  padding: 0.95rem 1.6rem; cursor: pointer; min-height: 3.2rem;
}
.done:hover { background: var(--lane-ink); }
.done-msg { font-weight: 700; color: var(--ok); }
.sign { margin-top: 2rem; font-size: 1.15rem; }

.saved {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 5;
  background: var(--ink); color: var(--paper); font-size: 0.95rem;
  padding: 0.45rem 0.8rem; border-radius: 3px; opacity: 0; transition: opacity 0.25s;
  pointer-events: none;
}
.saved.show { opacity: 1; }
.saved.err { background: var(--lane-ink); opacity: 1; }

@media (max-width: 40rem) {
  .frame { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; padding: 1.5rem 0; }
  .day { text-align: left; display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; padding: 0; }
  .day .label, .day .ord { display: inline; margin: 0; }
  .day .num { display: inline; font-size: 2.6rem; }
  .q { grid-template-columns: minmax(0, 1fr); }
  .q .n { font-size: 1.7rem; margin-bottom: 0.4rem; }
}
.spacer { height: 0.6rem; }
.questions.only { margin-top: 1rem; }
.questions.only .qgroup:first-child { margin-top: 0; }