/* The Fantastical Thinkery of Theo — consolidated reader styles.
   Three page layouts: cover (portrait-led), story (full art + warm reading
   cloud on the left), illustration (full-source mapped artwork). */

@font-face { font-family: Grandstander; src: url('assets/fonts/grandstander-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Grandstander; src: url('assets/fonts/grandstander-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: Grandstander; src: url('assets/fonts/grandstander-800.ttf') format('truetype'); font-weight: 800; font-display: swap; }
@font-face { font-family: Nunito; src: url('assets/fonts/nunito-400.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Nunito; src: url('assets/fonts/nunito-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --night:#0d1930; --night-soft:#17284b; --paper:#f6efdc; --ink:#18243a;
  --lamp:#f4c85c; --teal:#3d9c9d; --violet:#74619d;
  --display:Grandstander, ui-rounded, sans-serif; --body:Nunito, ui-rounded, sans-serif;
}
* { box-sizing:border-box; }
html { background:var(--night); }
body { min-width:320px; min-height:100vh; margin:0; background:radial-gradient(circle at 79% 5%,#253f70 0,transparent 25rem),var(--night); color:var(--paper); font-family:var(--body); }
button,a { font:inherit; }
button { cursor:pointer; }

/* ---------- Reader chrome ---------- */
.reader { width:min(100%,96rem); min-height:100vh; margin:auto; padding:1.4rem clamp(1rem,3vw,2.5rem) 1.8rem; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:1rem; }
.reader-header,.reader-controls { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.wordmark { color:var(--paper); font:800 clamp(1rem,1.5vw,1.25rem)/1 var(--display); letter-spacing:.025em; text-decoration:none; }
.map-button,.control { color:var(--paper); background:transparent; border:1px solid rgba(246,239,220,.42); border-radius:99px; padding:.66rem 1rem; font-weight:800; }
.map-button:hover,.control:hover { background:rgba(246,239,220,.12); }
.control:disabled { cursor:not-allowed; opacity:.35; }
.control--next { color:var(--lamp); border-color:rgba(244,200,92,.72); }
.reader-controls p { margin:0; color:#dce5f6; font:700 .78rem/1.2 var(--display); text-align:center; }
.chapter-map { padding:.8rem; border:1px solid rgba(244,200,92,.28); border-radius:1rem; background:rgba(13,25,48,.96); box-shadow:0 1rem 3rem rgba(0,0,0,.3); }
.chapter-map[hidden] { display:none; }
.chapter-map ul { display:flex; flex-wrap:wrap; gap:.55rem; margin:0; padding:0; list-style:none; }
.chapter-map a { display:block; padding:.48rem .68rem; border:1px solid rgba(246,239,220,.22); border-radius:.6rem; color:#dce5f6; font-size:.86rem; text-decoration:none; }
.chapter-map a:hover,.chapter-map a[aria-current='page'] { color:var(--night); background:var(--lamp); border-color:var(--lamp); }
.page-stage { min-height:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---------- Shared page structure ---------- */
.page { position:relative; isolation:isolate; min-height:clamp(39rem,76vh,56rem); overflow:hidden; border:2px solid rgba(24,36,58,.22); border-radius:1.7rem 1.45rem 1.9rem 1.35rem; background:#fffdf7; color:var(--ink); box-shadow:0 1.5rem 4rem rgba(0,0,0,.24),inset 0 0 0 4px rgba(246,239,220,.38); }
.page[hidden] { display:none; }
.page__art { position:absolute; z-index:0; background:var(--art) center/contain no-repeat; }
.page__poop { position:absolute; z-index:3; left:var(--poop-x); top:var(--poop-y); width:clamp(1rem,2.2vw,1.55rem); height:auto; fill:#8d5a38; stroke:#432b22; stroke-width:1.25; opacity:.78; transform:rotate(-13deg); filter:drop-shadow(0 1px 0 rgba(246,239,220,.7)); }
.page__content { position:relative; z-index:1; width:min(44%,38rem); min-height:100%; padding:clamp(2rem,5.5vw,5.5rem) 0 clamp(4rem,7vw,6rem); margin-left:clamp(1.5rem,6vw,6.75rem); display:flex; flex-direction:column; justify-content:center; }
.page__eyebrow { margin:0; color:var(--teal); font:800 clamp(.7rem,1.1vw,.9rem)/1.2 var(--display); letter-spacing:.14em; text-transform:uppercase; }
.page__title { max-width:18ch; margin:.6rem 0 1.4rem; font:800 clamp(2.35rem,5vw,5rem)/.92 var(--display); letter-spacing:-.04em; }
.prose { font-size:clamp(1.1rem,1.65vw,1.45rem); line-height:1.47; }
.prose p { max-width:37rem; margin:.68em 0; }
.prose p:first-child { margin-top:0; }
.prose .shout { max-width:20ch; margin:.45em 0; color:var(--night); font:800 clamp(1.85rem,4vw,3.8rem)/.92 var(--display); letter-spacing:-.035em; }
.prose .whisper { color:var(--violet); font:700 clamp(1.3rem,2vw,1.8rem)/1.15 var(--display); }
.page__folio { position:absolute; z-index:2; left:clamp(1.5rem,2.5vw,2.5rem); bottom:1.5rem; color:rgba(24,36,58,.55); font:700 .76rem/1 var(--display); letter-spacing:.1em; }

/* ---------- Cover: portrait-led, dark ---------- */
.page--cover { color:var(--paper); background:radial-gradient(circle at 72% 24%,rgba(244,200,92,.25),transparent 17rem),#142440; }
.page--cover .page__art { inset:clamp(1.2rem,3vw,2.8rem) clamp(1.2rem,4vw,4rem); left:auto; width:min(43%,33rem); background-color:#10203a; border:2px solid rgba(244,200,92,.5); border-radius:1.35rem 1.65rem 1.2rem 1.55rem; box-shadow:0 1.2rem 2.8rem rgba(0,0,0,.28); }
.page--cover .page__art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,25,48,0) 0%,rgba(13,25,48,.08) 63%,rgba(13,25,48,.62) 100%); }
.page--cover .page__content { background:#142440; }
.page--cover .page__eyebrow,.page--cover .page__folio { color:rgba(246,239,220,.75); }
.page--cover .page__title { max-width:11ch; font-size:clamp(3.3rem,8vw,7.8rem); }
.page--cover .prose { max-width:28rem; font-size:clamp(1.1rem,1.8vw,1.4rem); }
.page--cover .prose .shout { color:var(--lamp); }

/* ---------- Story pages: full art underneath, warm cloud reading field ---------- */
.page--story .page__art { inset:0; width:100%; height:100%; background-color:#e8e3d8; }
.page--story .page__art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(246,239,220,.01),rgba(246,239,220,.05)); }
.page--story .page__content { isolation:isolate; width:min(55%,42rem); margin:0; padding:clamp(2.4rem,5vw,5rem) clamp(2rem,4vw,4rem) clamp(4.5rem,7vw,6.5rem) clamp(2.4rem,6vw,6.25rem); }
.page--story .page__content::before { content:''; position:absolute; z-index:-1; inset:-3rem -4.5rem -3rem -2.5rem; background:radial-gradient(ellipse 115% 92% at 0% 50%,#fffdf7 0 65%,rgba(255,253,247,.96) 75%,rgba(255,253,247,.62) 86%,transparent 100%); filter:blur(1.5px); pointer-events:none; }
.page--story .page__title { max-width:13ch; margin:.45rem 0 1rem; font-size:clamp(2.1rem,4.1vw,3.65rem); line-height:.95; -webkit-text-stroke:.045em #fffdf7; paint-order:stroke fill; text-shadow:0 0 .35rem rgba(255,253,247,.9); }
.page--story .prose .shout { -webkit-text-stroke:.04em #fffdf7; paint-order:stroke fill; text-shadow:0 0 .32rem rgba(255,253,247,.9); }

/* ---------- Mapped illustration pages: full-source artwork ---------- */
.page--illustration { background:#f6efdc; }
.page--illustration .page__art { inset:0; width:100%; height:100%; background-color:#f6efdc; }
.page--illustration-four-three { min-height:0; aspect-ratio:4 / 3; max-width:calc((100vh - 11rem) * 4 / 3); margin-inline:auto; }
.page--illustration-wide { min-height:0; aspect-ratio:3 / 2; max-width:calc((100vh - 11rem) * 3 / 2); margin-inline:auto; }
.page--illustration-portrait { width:min(100%,42rem); min-height:0; margin-inline:auto; aspect-ratio:3 / 4; max-width:calc((100vh - 11rem) * 3 / 4); }

/* ---------- Mobile: art first, opaque reading surface below ---------- */
@media (max-width:680px) {
  html,body { max-width:100%; overflow-x:hidden; }
  .reader { width:100%; padding:.85rem; gap:.75rem; }
  .page-stage,.page,.page__content,.prose,.prose p { min-width:0; max-width:100%; }
  .page { min-height:calc(100svh - 8.75rem); padding-top:min(42svh,21rem); border-radius:1.2rem; }
  .page__art { inset:0 0 auto; width:100%; height:min(45svh,22rem); background-color:#e8e3d8; }
  .page__art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(246,239,220,.02) 0%,rgba(246,239,220,.06) 100%); }
  .page__title { max-width:100%; font-size:clamp(2.05rem,9vw,2.5rem); letter-spacing:-.055em; overflow-wrap:anywhere; }
  .prose { font-size:1.12rem; line-height:1.5; overflow-wrap:anywhere; hyphens:none; }
  .prose .shout { max-width:100%; font-size:clamp(1.75rem,10vw,3rem); overflow-wrap:anywhere; }
  .control span { display:none; }
  .reader-controls { gap:.5rem; }
  .chapter-map ul { display:grid; grid-template-columns:1fr 1fr; max-height:46vh; overflow:auto; }

  .page--story .page__content { width:auto; min-height:0; margin:0; padding:2rem 1.5rem 4.5rem; justify-content:flex-start; background:#fffdf7; }
  .page--story .page__art { inset:0 0 auto; width:100%; height:min(45svh,22rem); }
  .page--story .page__content::before { display:none; }
  .page--story .page__title { font-size:clamp(1.95rem,8.4vw,2.4rem); -webkit-text-stroke:.035em #fffdf7; }

  .page--cover { padding-top:min(48svh,24rem); }
  .page--cover .page__art { inset:1rem 1rem auto; width:calc(100% - 2rem); height:min(44svh,22rem); background-color:#10203a; border:2px solid rgba(244,200,92,.5); border-radius:1.15rem 1.35rem 1.1rem 1.28rem; box-shadow:0 1rem 2rem rgba(0,0,0,.25); }
  .page--cover .page__art::after { background:linear-gradient(180deg,rgba(13,25,48,0) 0%,rgba(13,25,48,.08) 64%,rgba(13,25,48,.7) 100%); }
  .page--cover .page__content { align-items:flex-start; min-height:0; margin:0; padding:2rem 1.5rem 4.5rem; text-align:left; background:#142440; }

  .page--illustration { min-height:0; padding:0; }
  .page--illustration .page__art { inset:0; width:100%; height:100%; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; } }