@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&family=Noto+Serif+Thai:wght@400;500;600;700&display=swap");

:root {
  --paper: #fffaf3;
  --cream: #f7efe4;
  --ink: #3e302b;
  --muted: #7d6d64;
  --coral: #d77763;
  --coral-soft: #f3d7cd;
  --sage: #8c9d81;
  --sage-soft: #e5eadf;
  --gold: #c89a55;
  --shadow: 0 26px 80px rgba(72, 51, 39, 0.18);
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow: hidden; }

body {
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 10%, rgba(255,255,255,.92), transparent 28%),
    radial-gradient(circle at 82% 85%, rgba(211,159,126,.25), transparent 36%),
    #eadfd2;
  font-family: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, sans-serif;
  overflow: hidden;
}

button { font: inherit; }

.reader {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 24px 84px;
}

.book {
  position: relative;
  width: min(92vw, 620px);
  height: min(78dvh, 850px);
  aspect-ratio: 3 / 4;
  perspective: 1600px;
}

.page {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 6px 18px 18px 6px;
  background: var(--paper);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateX(36px) rotateY(-3deg) scale(.985);
  transform-origin: left center;
  pointer-events: none;
  transition: opacity .42s ease, transform .55s cubic-bezier(.2,.78,.18,1);
}

.page::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 9px;
  background: linear-gradient(90deg, rgba(88,58,43,.12), transparent);
  pointer-events: none;
}

.page.is-active {
  opacity: 1;
  transform: translateX(0) rotateY(0) scale(1);
  pointer-events: auto;
  z-index: 2;
}

.page.was-active { transform: translateX(-36px) rotateY(3deg) scale(.985); }

.cover { background: #efe5d7; }

.cover-art {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.cover-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,250,242,.96) 0%, rgba(255,250,242,.72) 19%, transparent 47%, rgba(79,50,36,.16) 100%);
}

.cover-copy {
  position: absolute;
  top: 6.5%;
  left: 8%;
  right: 8%;
  text-align: center;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--coral);
  font-size: clamp(.68rem, 1.7vw, .82rem);
  font-weight: 600;
  letter-spacing: .08em;
}

.cover h1 {
  margin: 0;
  font-family: "Noto Serif Thai", serif;
  font-size: clamp(3.2rem, 10vw, 5.5rem);
  font-weight: 700;
  line-height: .98;
  letter-spacing: -.05em;
  color: #573d34;
}

.subtitle {
  margin: 16px 0 0;
  font-family: "Noto Serif Thai", serif;
  font-size: clamp(.88rem, 2.4vw, 1.14rem);
  line-height: 1.7;
  color: #6d564c;
}

.heart-mark { display: inline-block; margin-top: 12px; color: var(--coral); font-size: 1.1rem; }

.swipe-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2.5%;
  margin: 0;
  color: rgba(255,255,255,.9);
  text-align: center;
  font-size: .72rem;
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgba(54,35,26,.7);
}

.story-page { display: grid; grid-template-rows: 54% 46%; }
.story-image-wrap { position: relative; overflow: hidden; }
.story-image { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; display: block; }
.story-image-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, var(--paper)); }

.chapter-pill {
  position: absolute;
  z-index: 1;
  top: 6%;
  left: 7%;
  padding: 7px 14px;
  border-radius: 999px;
  color: white;
  background: rgba(72,52,44,.7);
  backdrop-filter: blur(8px);
  font-size: .72rem;
  letter-spacing: .1em;
}

.story-copy { padding: 2% 9% 6%; align-self: center; }
.story-copy p { margin: 0 0 10px; font-family: "Noto Serif Thai", serif; font-size: clamp(.82rem, 2.15vw, 1rem); line-height: 1.72; }
.story-copy .dropcap::first-letter { float: left; margin: .08em .12em 0 0; color: var(--coral); font-size: 3.2em; font-weight: 600; line-height: .78; }
.story-copy .pull-quote { margin-top: 14px; padding-left: 16px; border-left: 3px solid var(--coral); color: var(--coral); font-weight: 600; font-size: clamp(.92rem, 2.4vw, 1.12rem); }

.meaning-page { padding: 8% 8% 7%; background: linear-gradient(145deg, #fffaf3, #f6ecdf); }
.page-heading span { display: block; color: var(--coral); font-size: .8rem; font-weight: 600; letter-spacing: .12em; }
.page-heading h2 { margin: 3px 0 5%; font-family: "Noto Serif Thai", serif; font-size: clamp(1.65rem, 5.5vw, 2.55rem); line-height: 1.25; letter-spacing: -.04em; }
.voices { display: grid; gap: 3%; }

.voice-card {
  min-height: 23%;
  display: grid;
  grid-template-columns: 34% 1fr;
  align-items: center;
  gap: 3%;
  padding: 3% 5% 3% 2%;
  border-radius: 22px;
  position: relative;
}

.voice-card img { width: 100%; height: 140px; object-fit: cover; object-position: center 18%; border-radius: 16px; }
.mother-card { background: var(--coral-soft); }
.child-card { background: var(--sage-soft); grid-template-columns: 1fr 34%; padding: 3% 2% 3% 5%; }
.child-card img { grid-column: 2; grid-row: 1; }
.child-card div { grid-column: 1; grid-row: 1; text-align: right; }
.voice-label { margin: 0 0 5px; color: var(--muted); font-size: .72rem; font-weight: 600; letter-spacing: .05em; }
blockquote { margin: 0; font-family: "Noto Serif Thai", serif; font-size: clamp(.9rem, 2.65vw, 1.2rem); font-weight: 600; line-height: 1.55; }

.thread { height: 28px; display: grid; place-items: center; position: relative; color: var(--coral); }
.thread::before, .thread::after { content: ""; height: 1px; width: 42%; background: rgba(215,119,99,.45); position: absolute; }
.thread::before { left: 3%; } .thread::after { right: 3%; }
.thread span { position: relative; z-index: 1; padding: 0 10px; background: #f9f1e7; }
.meaning-note { margin: 5% 0 0; text-align: center; color: var(--muted); font-family: "Noto Serif Thai", serif; font-size: clamp(.8rem, 2.1vw, 1rem); line-height: 1.7; }
.meaning-note strong { color: var(--ink); }

.practice-page { padding: 7% 8%; background: linear-gradient(180deg, #fffaf3 0%, #f7eee2 100%); }
.practice-top { text-align: center; }
.chapter-no { margin: 0; color: var(--coral); font-family: "Noto Serif Thai", serif; font-size: clamp(1.8rem, 6vw, 2.7rem); font-weight: 700; line-height: 1; }
.chapter-name { margin: 6px 0; color: var(--muted); font-size: .7rem; letter-spacing: .08em; }
.practice-top h2 { margin: 2% 0 5%; font-family: "Noto Serif Thai", serif; font-size: clamp(1.7rem, 5.8vw, 2.6rem); line-height: 1.25; }
.practice-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 3%; }
.practice-cards article { padding: 6%; border-radius: 18px; }
.practice-cards span, .try-label { display: inline-block; margin-bottom: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; }
.practice-cards p { margin: 0; font-size: clamp(.75rem, 2vw, .94rem); line-height: 1.55; }
.intent-card { background: var(--coral-soft); }
.intent-card span { color: #a75343; }
.heard-card { background: #ebe5dd; }
.heard-card span { color: #695b52; }
.try-box { margin-top: 4%; padding: 5% 6%; border-radius: 20px; background: var(--sage); color: white; text-align: center; box-shadow: 0 10px 22px rgba(86,107,73,.18); }
.try-label { margin: 0; padding: 4px 10px; border-radius: 99px; color: #54654d; background: #f2f5ed; }
.try-box p { margin: 9px 0 5px; font-family: "Noto Serif Thai", serif; font-size: clamp(1rem, 3vw, 1.35rem); font-weight: 600; line-height: 1.55; }
.try-box small { color: rgba(255,255,255,.82); font-size: .68rem; }
.closing-line { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 5%; color: var(--muted); text-align: left; }
.closing-line span { color: var(--coral); font-size: 1.15rem; }
.closing-line p { margin: 0; font-family: "Noto Serif Thai", serif; font-size: clamp(.78rem, 2vw, .96rem); line-height: 1.55; }
.closing-line strong { color: var(--ink); }

/* Family edition — mother, teenage daughter, young son */
.cover-wash-v2 {
  background: linear-gradient(180deg, rgba(255,250,242,.98) 0%, rgba(255,250,242,.72) 23%, transparent 48%, rgba(74,47,34,.18) 100%);
}
.cover-copy-v2 { top: 5%; }
.cover-copy-v2 .subtitle { margin-top: 12px; }

.section-title { text-align: center; }
.section-title > p { margin: 0; color: var(--coral); font-size: .72rem; font-weight: 700; letter-spacing: .11em; }
.section-title h2 { margin: 2px 0 4%; font-family: "Noto Serif Thai", serif; font-size: clamp(1.8rem, 5.6vw, 2.6rem); line-height: 1.2; letter-spacing: -.04em; }
.compact-title h2 { font-size: clamp(1.55rem, 5vw, 2.25rem); }

.cast-page { padding: 7% 7% 5%; background: linear-gradient(145deg, #fffaf3, #f5eadf); }
.cast-list { display: grid; gap: 2.2%; height: 70%; }
.cast-card { display: grid; grid-template-columns: 31% 1fr; align-items: center; gap: 4%; padding: 2.5% 4% 2.5% 2.5%; border-radius: 20px; overflow: hidden; }
.cast-card img { width: 100%; height: 132px; display: block; border-radius: 16px; object-fit: cover; object-position: center 15%; background: rgba(255,255,255,.4); }
.cast-card span { color: var(--muted); font-size: .66rem; font-weight: 700; letter-spacing: .04em; }
.cast-card h3 { margin: 2px 0 3px; font-family: "Noto Serif Thai", serif; font-size: clamp(.95rem, 2.8vw, 1.2rem); }
.cast-card p { margin: 0; color: #62554e; font-size: clamp(.68rem, 1.75vw, .82rem); line-height: 1.48; }
.cast-mom { background: #f3d7cd; }
.cast-daughter { background: #e8ddf0; }
.cast-son { background: #dfe9dc; }
.cast-footer { margin: 3.2% 0 0; color: var(--muted); text-align: center; font-family: "Noto Serif Thai", serif; font-size: clamp(.76rem, 2vw, .94rem); }

.intro-scene-page { display: grid; grid-template-rows: 63% 37%; }
.intro-art-wrap { position: relative; overflow: hidden; }
.intro-art-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 47%; }
.intro-art-wrap::after { content: ""; position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(transparent, var(--paper)); }
.intro-pill { position: absolute; z-index: 1; top: 5%; left: 6%; padding: 7px 14px; border-radius: 99px; color: #fff; background: rgba(75,53,43,.7); backdrop-filter: blur(8px); font-size: .7rem; font-weight: 600; letter-spacing: .1em; }
.intro-scene-copy { padding: 1% 8% 5%; align-self: center; }
.intro-scene-copy p { margin: 0 0 8px; font-family: "Noto Serif Thai", serif; font-size: clamp(.78rem, 2.05vw, .98rem); line-height: 1.68; }
.intro-scene-copy .time-mark { margin-bottom: 5px; color: var(--coral); font-family: "IBM Plex Sans Thai", sans-serif; font-size: clamp(1.35rem, 4vw, 1.9rem); font-weight: 700; letter-spacing: .04em; }

.prose-page { padding: 8% 9%; background: radial-gradient(circle at 86% 10%, rgba(216,119,99,.12), transparent 28%), linear-gradient(160deg, #fffaf3, #f5eade); }
.prose-number { color: var(--coral-soft); font-family: "Noto Serif Thai", serif; font-size: clamp(4rem, 15vw, 7rem); font-weight: 700; line-height: .75; }
.prose-kicker { margin: -1% 0 1%; color: var(--coral); font-size: .7rem; font-weight: 700; letter-spacing: .1em; }
.prose-page h2 { margin: 0 0 5%; font-family: "Noto Serif Thai", serif; font-size: clamp(1.45rem, 4.8vw, 2.25rem); line-height: 1.35; letter-spacing: -.035em; }
.prose-body { padding-left: 5%; border-left: 2px solid var(--coral-soft); }
.prose-body p { margin: 0 0 11px; font-family: "Noto Serif Thai", serif; font-size: clamp(.78rem, 2vw, .95rem); line-height: 1.72; }
.big-quote { margin: 6% 0 4%; padding: 5% 6%; border-radius: 18px; color: #fff; background: var(--coral); text-align: center; box-shadow: 0 12px 25px rgba(142,78,65,.16); font-size: clamp(1rem, 3vw, 1.3rem); }
.quiet-line { margin: 0; color: var(--muted); text-align: center; font-family: "Noto Serif Thai", serif; font-size: clamp(.72rem, 1.9vw, .88rem); }

.echo-page { padding: 7% 7% 5%; background: linear-gradient(150deg, #fffaf3, #f5ebdf); }
.echo-stack { display: grid; gap: 2.5%; height: 64%; }
.echo-card { display: grid; grid-template-columns: 30% 1fr; align-items: center; gap: 4%; padding: 2.5% 4% 2.5% 2%; border-radius: 19px; }
.echo-card img { width: 100%; height: 120px; object-fit: cover; object-position: center 16%; border-radius: 15px; background: rgba(255,255,255,.42); }
.echo-card span { color: var(--muted); font-size: .65rem; font-weight: 700; letter-spacing: .04em; }
.echo-card p { margin: 4px 0 0; font-family: "Noto Serif Thai", serif; font-size: clamp(.84rem, 2.35vw, 1.05rem); font-weight: 600; line-height: 1.5; }
.mom-echo { background: var(--coral-soft); }
.daughter-echo { background: #e9ddf0; }
.son-echo { background: var(--sage-soft); }
.echo-footer { margin: 3% 0 0; color: var(--muted); text-align: center; font-family: "Noto Serif Thai", serif; font-size: clamp(.76rem, 2vw, .92rem); line-height: 1.55; }
.echo-footer strong { color: var(--ink); }

.roadmap-page { padding: 7% 8% 6%; background: linear-gradient(180deg, #fffaf3, #f3eadf); }
.roadmap { display: grid; gap: 2.2%; margin: 0; padding: 0; list-style: none; }
.roadmap li { display: grid; grid-template-columns: 15% 1fr; align-items: center; gap: 4%; padding: 3.3% 4%; border-radius: 17px; background: rgba(255,255,255,.74); box-shadow: 0 5px 16px rgba(79,55,42,.06); }
.roadmap li:nth-child(2) { background: #f0e6f4; }
.roadmap li:nth-child(3) { background: #e6eee2; }
.roadmap li:nth-child(4) { background: #f3ddd3; }
.roadmap li > span { color: var(--coral); font-family: "Noto Serif Thai", serif; font-size: clamp(1.2rem, 4vw, 1.7rem); font-weight: 700; }
.roadmap h3 { margin: 0; font-family: "Noto Serif Thai", serif; font-size: clamp(.9rem, 2.5vw, 1.1rem); }
.roadmap p { margin: 2px 0 0; color: #665950; font-size: clamp(.65rem, 1.7vw, .78rem); line-height: 1.45; }
.outline-link { display: block; margin: 4% auto 0; width: fit-content; padding: 8px 15px; border: 1px solid rgba(215,119,99,.35); border-radius: 99px; color: var(--coral); text-decoration: none; font-size: .7rem; font-weight: 700; }

.new-start-page { background: #e9ddcf; }
.new-start-page > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.new-start-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,250,243,.97) 0%, rgba(255,250,243,.82) 37%, transparent 63%, rgba(62,42,32,.28) 100%); }
.new-start-page article { position: absolute; top: 7%; left: 8%; right: 8%; text-align: center; }
.new-start-page article > p { margin: 0; color: var(--coral); font-size: .74rem; font-weight: 700; letter-spacing: .07em; }
.new-start-page h2 { margin: 5px 0 12px; font-family: "Noto Serif Thai", serif; font-size: clamp(1.8rem, 6vw, 2.7rem); line-height: 1.3; }
.new-start-page blockquote { color: #68544b; font-size: clamp(.84rem, 2.4vw, 1.02rem); font-weight: 500; }
.new-start-page article > span { display: inline-block; margin-top: 10px; color: var(--coral); }

.controls {
  position: fixed;
  z-index: 10;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(255,250,243,.78);
  box-shadow: 0 8px 28px rgba(73,50,36,.13);
  backdrop-filter: blur(14px);
}

.nav-button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: white; background: var(--coral); cursor: pointer; font-size: 1.1rem; transition: transform .2s ease, opacity .2s ease; }
.nav-button:hover { transform: translateY(-2px); }
.nav-button:disabled { opacity: .3; cursor: default; transform: none; }
.progress { display: flex; align-items: center; gap: 8px; min-width: 76px; justify-content: center; color: var(--muted); font-size: .78rem; font-weight: 600; }
.progress i { display: block; width: 26px; height: 1px; background: #c9b9ad; }

@media (max-height: 720px) and (min-width: 560px) {
  .book { height: 72dvh; }
}

@media (max-width: 560px) {
  .reader { padding: 0 0 70px; place-items: start center; background: var(--paper); }
  .book { width: 100vw; height: calc(100dvh - 70px); max-height: none; aspect-ratio: auto; overflow: hidden; }
  .page { border-radius: 0; box-shadow: none; }
  .voice-card img { height: 17dvh; }
  .controls { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .page, .nav-button { transition: none; }
}