/* The Amber Accord: the home page, the read-aloud page for book owners, and the small pages around them.
   Daylight colours: the book's own cream paper with honey for the accents. The storybook itself (read/book.css)
   keeps its candlelit table, so opening the book is like turning the lamp down for a bedtime story. */
:root {
  --bg: #f4ead6;
  --bg-glow: #fcf6ea;
  --text: #2b1d11;
  --text-dim: #6c563d;
  --line: rgba(43, 29, 17, 0.16);
  --em: #94560f;
  --shadow: 0 14px 34px rgba(74, 46, 14, 0.16), 0 1px 3px rgba(74, 46, 14, 0.14);
  --cream: #f4e9cf;
  --paper: #f3e7cb;
  --ink: #2b1d11;
  --ink-soft: #6f5940;
  --ink-cap: #6b3d14;
  --amber: #c9892d;
  --amber-deep: #a86d1c;
  --ok: #2f5d2a;
  --warn: #8a2f17;
  --serif: "IM Fell English", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --serif-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  overflow-x: clip;
  background: radial-gradient(120% 60% at 50% 0%, var(--bg-glow) 0%, var(--bg) 62%) fixed, var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
}
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
a { color: var(--ink-cap); text-decoration-color: rgba(107, 61, 20, 0.4); text-underline-offset: 0.18em; }
a:hover { text-decoration-color: var(--amber); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
h1, h2, h3 { font-weight: 400; line-height: 1.12; text-wrap: balance; margin: 0; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(100%, 1080px); margin-inline: auto; }
.kicker { font-family: var(--serif-sc); font-size: 15px; letter-spacing: 0.2em; color: var(--text-dim); }

/* ------------------------------------------------------------------ top bar and footer */
.top {
  width: min(100%, 1080px); margin-inline: auto;
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 22px;
  padding-block: max(18px, env(safe-area-inset-top, 0px)) 8px;
}
.mark { font-family: var(--serif-sc); font-size: 21px; letter-spacing: 0.08em; text-decoration: none; color: var(--text); }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 16.5px; }
.top nav a { text-decoration: none; color: var(--text-dim); padding-block: 6px; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--text); }
.foot {
  width: min(100%, 1080px); margin: auto auto 0; padding-block: 40px max(28px, env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between;
  font-size: 15px; color: var(--text-dim); border-top: 1px solid var(--line); margin-top: 56px;
}
.foot a { color: var(--text-dim); }

/* ------------------------------------------------------------------ buttons and forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
  font: inherit; font-size: 17px; line-height: 1.2; text-decoration: none; text-align: center;
  min-height: 48px; padding: 0.6em 1.4em; border-radius: 999px; cursor: pointer;
  color: var(--text); background: transparent; border: 1px solid rgba(43, 29, 17, 0.4);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--amber); border-color: var(--amber); color: var(--ink); }
@media (hover: hover) {
  .btn:hover { border-color: var(--text); }
  .btn.primary:hover { background: #d99a3c; }
}
.paper {
  background: #fffaf0 radial-gradient(120% 90% at 50% 30%, rgba(255, 253, 247, 0.8), rgba(214, 180, 120, 0.12));
  color: var(--ink); border-radius: 4px; padding: clamp(22px, 5vw, 44px);
  border: 1px solid rgba(107, 61, 20, 0.12); box-shadow: var(--shadow);
}
.paper a { color: var(--ink-cap); text-decoration-color: rgba(107, 61, 20, 0.45); }
.paper .btn { color: var(--ink); border-color: rgba(43, 29, 17, 0.45); }
.paper .btn.primary { color: var(--cream); background: var(--ink); border-color: var(--ink); }
@media (hover: hover) { .paper .btn.primary:hover { background: #4a3320; } }
.field { display: grid; gap: 6px; font-size: 16.5px; }
.field > span { color: var(--ink-soft); }
.field em { font-style: italic; }
.field input, .field select {
  font: inherit; font-size: 18px; color: var(--ink); background: #fffaf0;
  border: 1px solid rgba(43, 29, 17, 0.35); border-radius: 10px; min-height: 50px; padding: 0.45em 0.8em; width: 100%;
}
.field input::placeholder { color: #9c8a70; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fine { font-size: 15px; color: var(--ink-soft); }
.msg { font-size: 16.5px; min-height: 0; }
.msg:empty { display: none; }
.msg.ok { color: var(--ok); }
.msg.err { color: var(--warn); }

/* ------------------------------------------------------------------ home: the book on the table */
.hero {
  width: min(100%, 1080px); margin-inline: auto; padding-block: 28px 16px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 64px); align-items: center;
}
.book { margin: 0; position: relative; }
.book img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px 4px 4px 2px; background: #3a2a1b;
  box-shadow: 0 26px 50px rgba(74, 46, 14, 0.34), 0 3px 8px rgba(74, 46, 14, 0.24);
}
/* the spine edge of a paperback */
.book::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4%; z-index: 1; pointer-events: none; border-radius: 2px 0 0 2px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.08) 45%, rgba(0, 0, 0, 0.12));
}
.hero-text { display: grid; gap: 18px; min-width: 0; }
.hero h1 { font-size: clamp(38px, 5.4vw, 62px); color: var(--text); }
.lede { font-size: clamp(18px, 1.1vw + 13px, 21px); max-width: 34em; }
.lede em { color: var(--em); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.small { font-size: 15px; color: var(--text-dim); }

.ways { width: min(100%, 1080px); margin: 64px auto 0; display: grid; gap: 26px; }
.ways > h2, .signup h2 { font-size: clamp(28px, 3vw, 36px); color: var(--text); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; min-width: 0; padding: 0 0 22px; overflow: hidden; }
.card.paper { padding: 0 0 22px; }
.card img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #3a2a1b; }
.card h3 { font-size: 23px; padding-inline: 22px; margin-top: 6px; }
.card p { font-size: 16.5px; padding-inline: 22px; color: #43301e; }
.card > a { padding-inline: 22px; font-size: 17px; justify-self: start; }

.signup { width: min(100%, 760px); margin: 72px auto 0; scroll-margin-top: 20px; }
.signup .paper { display: grid; gap: 14px; }
.signup h2 { color: var(--ink); }
.signup form, .stack { display: grid; gap: 16px; margin-top: 6px; }
.signup .btn { justify-self: start; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; padding-top: 12px; }
  .book { width: min(100%, 460px); margin-inline: auto; }
  .cards { grid-template-columns: 1fr; }
  .card img { aspect-ratio: 16 / 8; }
}
@media (max-width: 480px) {
  body { font-size: 17px; }
  .actions .btn, .signup .btn { width: 100%; }
  .top nav { gap: 2px 14px; font-size: 15.5px; }
}

/* ------------------------------------------------------------------ the read-aloud page (/e1), privacy and thanks */
.narrow { width: min(100%, 640px); margin-inline: auto; padding-top: 24px; display: grid; gap: 22px; }
.narrow > h1 { font-size: clamp(36px, 6vw, 52px); color: var(--text); }
.narrow > .intro { font-size: 18.5px; }
.lock form { display: grid; gap: 14px; margin-top: 14px; }
.lock .btn { justify-self: start; }
.player { display: grid; gap: 18px; justify-items: center; text-align: center; }
.voices { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 3px; padding: 3px; border: 1px solid rgba(43, 29, 17, 0.3); border-radius: 999px; }
.voices button {
  font: inherit; font-size: 16.5px; color: var(--ink); background: transparent; border: 0; border-radius: 999px;
  min-height: 42px; padding: 0.3em 1.05em; cursor: pointer;
}
.voices button[aria-checked="true"] { background: var(--ink); color: var(--cream); }
.where { font-family: var(--serif-sc); letter-spacing: 0.12em; font-size: 19px; color: var(--ink-cap); }
.transport { display: flex; align-items: center; justify-content: center; gap: 14px; }
.round { min-width: 54px; min-height: 54px; padding: 0 12px; font-size: 15px; }
.play { min-width: 128px; min-height: 64px; font-size: 21px; }
.seek { width: 100%; accent-color: var(--ink-cap); height: 28px; }
.times { width: 100%; display: flex; justify-content: space-between; font-family: Georgia, "Times New Roman", serif; font-size: 14px; color: var(--ink-soft); font-variant-numeric: lining-nums tabular-nums; margin-top: -10px; }
.tip { font-style: italic; color: var(--ink-soft); }
.resume { font-size: 15.5px; color: var(--ink-soft); }
.resume button { font: inherit; color: var(--ink-cap); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.prose { display: grid; gap: 14px; }
.prose h2 { font-size: 24px; margin-top: 12px; color: var(--ink); }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }