:root {
  --ink: #20302a;
  --muted: #68766f;
  --paper: #fffdf6;
  --leaf: #2f6f55;
  --leaf-dark: #1f4c3a;
  --sun: #e8b84b;
  --line: #dbe2da;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(232,184,75,.22), transparent 25rem),
    radial-gradient(circle at 88% 90%, rgba(47,111,85,.17), transparent 28rem),
    #edf1e9;
  font-family: Georgia, "Times New Roman", serif;
}

button { font: inherit; }

.reader {
  width: min(920px, calc(100% - 32px));
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  background: var(--paper);
  border: 1px solid rgba(32,48,42,.12);
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(32,48,42,.14);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.topbar, .controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 32px;
}

.topbar { border-bottom: 1px solid var(--line); }
.topbar h1 { margin: 3px 0 0; font-size: clamp(1.15rem, 3vw, 1.55rem); }
.eyebrow, .kicker { margin: 0; color: var(--leaf); font: 700 .72rem/1.2 Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.text-button { color: var(--leaf-dark); background: transparent; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }

.contents { padding: 18px 32px; border-bottom: 1px solid var(--line); background: #f5f5ec; }
.contents button { margin: 4px 7px 4px 0; padding: 8px 12px; color: var(--leaf-dark); background: white; border: 1px solid var(--line); border-radius: 99px; cursor: pointer; }
.contents button[aria-current="page"] { color: white; background: var(--leaf); border-color: var(--leaf); }

.page { width: min(680px, 100%); margin: auto; padding: clamp(42px, 8vw, 82px) 32px; outline: none; }
.page h2 { margin: 10px 0 24px; font-size: clamp(2.25rem, 7vw, 4.7rem); line-height: .98; letter-spacing: -.045em; }
.page p { font-size: clamp(1.05rem, 2.5vw, 1.25rem); line-height: 1.75; }
.page .prompt { margin-top: 28px; padding: 19px 22px; border-left: 5px solid var(--sun); background: #faf3df; font-style: italic; }
.page .mark { display: block; margin-bottom: 20px; color: var(--sun); font-size: 2rem; letter-spacing: .2em; }

.controls { border-top: 1px solid var(--line); }
.controls > button { min-width: 118px; padding: 11px 15px; color: white; background: var(--leaf); border: 0; border-radius: 9px; cursor: pointer; }
.controls > button:hover { background: var(--leaf-dark); }
.controls > button:disabled { opacity: .35; cursor: not-allowed; }
.progress-wrap { width: min(280px, 38%); text-align: center; color: var(--muted); font: .82rem/1.3 Arial, sans-serif; }
.progress { height: 5px; margin-top: 8px; background: var(--line); border-radius: 9px; overflow: hidden; }
.progress span { display: block; width: 10%; height: 100%; background: var(--sun); transition: width .25s ease; }

@media (max-width: 600px) {
  .reader { width: 100%; min-height: 100vh; margin: 0; border: 0; border-radius: 0; }
  .topbar, .controls { padding: 18px; }
  .page { padding-inline: 24px; }
  .controls > button { min-width: auto; }
  .progress-wrap { width: 42%; }
}

@media (prefers-reduced-motion: reduce) { .progress span { transition: none; } }