:root {
  --forest: #334c39;
  --deep: #213128;
  --moss: #708165;
  --paper: #f4eddd;
  --paper-light: #fffaf0;
  --sand: #d6c29c;
  --terra: #a45339;
  --ink: #28332c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow-x: hidden;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  color: var(--ink);
  background: var(--paper);
  font-family: Charter, "Bitstream Charter", "Palatino Linotype", Georgia, serif;
  line-height: 1.65;
}

.masthead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: max(28px, env(safe-area-inset-top)) clamp(22px, 6vw, 72px) 42px;
  color: #fffaf0;
  background: var(--forest);
  border-bottom: 8px solid var(--sand);
}

.hero-copy { position: relative; z-index: 2; }
.hero-tortoise {
  position: absolute;
  z-index: 1;
  right: -22px;
  bottom: -12px;
  width: min(86vw, 430px);
  height: 210px;
  object-fit: contain;
  object-position: right bottom;
  filter: drop-shadow(0 10px 11px rgb(17 28 20 / .34));
  pointer-events: none;
}

.eyebrow, .chapter-number, legend, button, select, .status {
  font-family: "Trebuchet MS", "Gill Sans", sans-serif;
}

.eyebrow { color: var(--sand); font-size: .75rem; font-weight: 700; letter-spacing: .16em; }
h1 { max-width: 15ch; margin: 12px 0 8px; font-size: clamp(2rem, 9vw, 4.8rem); line-height: .98; font-weight: 700; }
.masthead p { margin: 0; color: #e9dfc9; }

main { width: min(100%, 920px); margin: 0 auto; }
.player { padding: 34px clamp(20px, 6vw, 58px) 28px; background: var(--paper-light); }
.chapter-number { color: var(--terra); font-size: .76rem; font-weight: 800; letter-spacing: .13em; }
h2 { margin: 6px 0 24px; color: var(--forest); font-size: clamp(1.65rem, 6vw, 2.7rem); line-height: 1.12; }

.voices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 18px; padding: 0; border: 0; }
.voices legend { grid-column: 1 / -1; margin-bottom: 7px; color: var(--deep); font-size: .86rem; font-weight: 700; }
.voices label { min-width: 0; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 8px 4px; border: 1px solid var(--sand); background: var(--paper); font-size: clamp(.78rem, 3.8vw, 1rem); white-space: nowrap; cursor: pointer; }
.voices label:has(input:checked) { color: #fffaf0; background: var(--forest); border-color: var(--forest); }
.voices input { position: absolute; opacity: 0; }

audio { display: block; width: 100%; min-height: 54px; margin: 6px 0 16px; accent-color: var(--terra); }
.chapter-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button, select { min-height: 44px; border: 0; font-size: .92rem; font-weight: 700; }
button { color: #fffaf0; background: var(--forest); cursor: pointer; }
button:disabled { opacity: .42; cursor: default; }
.chapter-picker { display: grid; gap: 6px; margin-top: 20px; font-size: .84rem; font-weight: 700; }
select { width: 100%; padding: 0 12px; color: var(--ink); background: var(--paper); border: 1px solid var(--sand); }
.offline { width: 100%; margin-top: 14px; color: var(--forest); background: transparent; border: 1px solid var(--forest); }
.status { margin: 10px 0 0; color: var(--moss); font-size: .78rem; }

.reading { padding: 34px clamp(22px, 7vw, 68px) 80px; font-size: clamp(1.05rem, 3.8vw, 1.22rem); }
.reading p { margin: 0 0 1.25em; }

@media (min-width: 760px) {
  body { padding: 42px max(42px, env(safe-area-inset-right)) 42px max(42px, env(safe-area-inset-left)); background: var(--deep); }
  main, .masthead { width: min(100%, 920px); margin-inline: auto; }
  .masthead { border-radius: 4px 4px 0 0; }
  .masthead { min-height: 350px; display: flex; align-items: center; }
  .hero-copy { width: 58%; }
  .hero-tortoise { right: -10px; width: 52%; height: 330px; }
  .reading { background: var(--paper); column-count: 2; column-gap: 52px; }
}

@media (max-width: 759px) {
  .masthead { min-height: 430px; padding-bottom: 195px; }
  .hero-tortoise { left: 18%; right: auto; bottom: -4px; width: 78%; height: 190px; opacity: .96; }
}

@media (max-width: 360px) {
  .masthead { min-height: 410px; padding-bottom: 178px; }
  h1 { font-size: clamp(1.85rem, 10.8vw, 2.55rem); }
  .hero-tortoise { left: 8%; width: 90%; height: 172px; }
  .voices, .chapter-nav { grid-template-columns: 1fr; }
  .player { padding-inline: 16px; }
}

@media (orientation: landscape) and (max-height: 600px) {
  body { padding: 0; }
  .masthead { min-height: 300px; padding: 28px 34px; display: flex; align-items: center; }
  .hero-copy { width: 56%; }
  h1 { font-size: clamp(2.1rem, 7vw, 3.8rem); }
  .hero-tortoise { left: auto; right: 2%; bottom: 0; width: 43%; height: 270px; }
  .player { padding-block: 26px; }
}

@media (min-width: 1200px) {
  main, .masthead { width: min(100%, 1080px); }
  .masthead { min-height: 390px; }
  .hero-tortoise { width: 50%; height: 370px; }
  .reading { column-count: 3; column-gap: 46px; }
}

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }