:root{--ink:#2d1c10;--brown:#714619;--gold:#b47a2b;--paper:#fff8e8;--parch:#ebd8ae;--line:#cca45d}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Georgia,"Times New Roman",serif;background:linear-gradient(110deg,#fff9ea,#ead5a7)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;background-image:linear-gradient(rgba(80,45,15,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(80,45,15,.04) 1px,transparent 1px);background-size:38px 38px}
.page{display:none;min-height:100vh}.page.active{display:block}.site-header{position:fixed;z-index:50;inset:0 0 auto 0;height:78px;padding:0 4%;display:flex;align-items:center;justify-content:space-between;background:rgba(247,233,200,.97);border-bottom:3px double var(--gold);box-shadow:0 4px 18px rgba(70,40,12,.13);transition:.2s}.site-header.is-hidden{display:none}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none}.brand-mark{font-size:38px;color:#936020}.brand b{display:block;font-size:25px}.brand small{display:block}
#mainNav{display:flex;align-items:center;gap:20px}#mainNav a,#mainNav button{font:inherit;font-size:15px;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer}#mainNav a:hover,#mainNav a.active{color:#a36b20}.more{position:relative}.more-menu{display:none;position:absolute;right:0;top:25px;min-width:210px;padding:12px;background:#f7e8c6;border:1px solid var(--line);box-shadow:0 12px 25px rgba(70,40,12,.2)}.more:hover .more-menu,.more:focus-within .more-menu{display:grid;gap:12px}.menu-button{display:none;border:0;background:none;font-size:28px}
.home-image{position:relative;width:100%;aspect-ratio:16/10;background:url("assets/home.png") top center/cover no-repeat}.hotspot{position:absolute;display:block}.h-about{left:41.4%;top:1.3%;width:5.5%;height:5.3%}.h-heroes{left:48.2%;top:1.3%;width:4.7%;height:5.3%}.h-journey{left:53.6%;top:1.3%;width:8.8%;height:5.3%}.h-scientists{left:62.7%;top:1.3%;width:5.9%;height:5.3%}.h-beyond{left:68.8%;top:1.3%;width:12%;height:5.3%}.h-games{left:81.2%;top:1.3%;width:4.8%;height:5.3%}.h-teachers{left:86.4%;top:1.3%;width:6.4%;height:5.3%}.h-synopsis{left:93%;top:1.3%;width:6.4%;height:5.3%}.h-card1{left:1.7%;top:80%;width:31%;height:18%}.h-card2{left:34%;top:80%;width:31%;height:18%}.h-card3{left:66%;top:80%;width:31%;height:18%}
.inner{padding:125px 7% 80px;background:radial-gradient(circle at 84% 8%,rgba(181,126,46,.2),transparent 34%),linear-gradient(110deg,#fff9ea,#ead6aa)}.inner.wide{padding-left:4%;padding-right:4%}.page-head{max-width:1120px;margin:0 auto 42px}.page-head span{text-transform:uppercase;letter-spacing:.18em;color:#91601f;font-size:14px}.page-head h1{font-size:58px;font-weight:500;margin:8px 0}.page-head div{color:var(--gold);letter-spacing:.5em}.intro{max-width:1000px;margin:0 auto 36px;font-size:20px;line-height:1.65}.two-col,.synopsis-grid{max-width:1120px;margin:auto;display:grid;grid-template-columns:2fr .85fr;gap:30px;align-items:start}.paper,.quote-card,.symbol-card,.hero-card,.preview-card,.author-card,.construction,.future-book{background:rgba(255,249,232,.84);border:1px solid var(--line);box-shadow:0 18px 38px rgba(70,42,15,.12)}.paper{padding:44px 52px;font-size:20px;line-height:1.72}.paper h2{font-size:31px;font-weight:500;margin-top:0}.quote-card{padding:42px 30px;font-size:20px;line-height:1.65;font-style:italic}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.actions.centered{justify-content:center}.button{display:inline-block;padding:14px 23px;border:1px solid #87591e;text-decoration:none;color:var(--ink);font-weight:bold;background:rgba(255,248,226,.6)}.button.dark{background:#34200f;color:#fff2d2}.disabled{opacity:.7;cursor:default}.side-stack{display:grid;gap:22px}.symbol-card{padding:29px;text-align:center}.symbol-card>span{display:grid;place-items:center;width:90px;height:90px;margin:auto;border:1px solid var(--gold);border-radius:50%;font-size:48px;color:#97631f}.symbol-card b{display:block;font-size:23px;margin:12px}
.letter{max-width:900px;margin:auto;padding:55px 68px;background:rgba(255,249,232,.9);border:1px solid var(--line);box-shadow:0 18px 45px rgba(70,42,15,.14);font-size:19px;line-height:1.75}.lead-letter{font-size:23px;font-style:italic}.letter-blocks section{padding:22px 0;border-top:1px solid rgba(180,122,43,.38)}.letter-blocks h2{font-weight:500}.letter blockquote{margin:36px 0;padding:25px 35px;border-left:3px solid var(--gold);background:rgba(230,204,153,.22);font-size:21px;font-style:italic}
.timeline{max-width:920px;margin:auto;position:relative}.timeline:before{content:"";position:absolute;left:28px;top:0;bottom:0;width:1px;background:var(--gold)}.chapter-card{position:relative;margin:0 0 20px 72px;padding:22px 26px;background:rgba(255,249,232,.82);border:1px solid var(--line);cursor:pointer;transition:.2s}.chapter-card:before{content:"";position:absolute;left:-52px;top:28px;width:13px;height:13px;border:3px solid var(--gold);border-radius:50%;background:#f5e3bd}.chapter-card:hover{transform:translateX(5px);box-shadow:0 12px 28px rgba(70,42,15,.13)}.chapter-card small{color:#95601d;text-transform:uppercase;letter-spacing:.12em}.chapter-card h2{margin:7px 0 4px;font-size:25px;font-weight:500}.chapter-card p{margin:0;color:#6e4d2a}
.hero-grid{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:23px}.hero-card{padding:28px;text-align:center}.portrait,.author-placeholder{width:105px;height:105px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--gold);font-size:32px;background:radial-gradient(circle,#fff8e6,#d7b676);color:#714619}.hero-card h2{font-size:29px;margin:10px}.hero-card p{font-size:17px;line-height:1.6;text-align:left}

.school{max-width:1120px;margin:0 auto 55px;padding:35px 40px;border:1px solid var(--line);background:rgba(244,226,190,.55)}.school-head{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}.school h2{font-size:36px;font-weight:500;margin:0}.epigraph{font-style:italic;font-size:19px;border-left:2px solid var(--gold);padding-left:20px}.school-description{line-height:1.68;max-height:190px;overflow:hidden;position:relative}.school-description.expanded{max-height:none}.school-description:not(.expanded):after{content:"";position:absolute;left:0;right:0;bottom:0;height:60px;background:linear-gradient(transparent,#eee0c1)}.read-school{border:0;background:none;color:#885718;text-decoration:underline;cursor:pointer;font:inherit}.people-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}.person-card{padding:22px;border:1px solid var(--line);background:rgba(255,249,232,.8);cursor:pointer}.person-card:hover{box-shadow:0 10px 25px rgba(70,42,15,.12)}.person-card h3{margin:0 0 8px;font-size:23px}.person-card p{margin:0;line-height:1.5}.future-book{max-width:800px;margin:65px auto 0;padding:42px;text-align:center}.future-book>span{font-size:55px;color:var(--gold)}
.placeholder-grid{max-width:1120px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.preview-card{padding:28px}.preview-card h2{font-size:25px;font-weight:500}.preview-card p{line-height:1.6}.construction{max-width:850px;margin:45px auto 0;padding:32px;text-align:center}.construction b{font-size:25px}.construction p{font-size:18px}
.author-grid{max-width:1000px;margin:auto;display:grid;grid-template-columns:1fr 1fr;gap:28px}.author-card{padding:35px;text-align:center}.author-card p{text-align:left;line-height:1.65}.story{max-width:1000px;margin:35px auto}.buy-grid{max-width:1000px;margin:auto;display:grid;grid-template-columns:330px 1fr;gap:40px}.book-mock{width:310px;min-height:440px;padding:46px 24px;text-align:center;color:#ffe0a0;background:linear-gradient(155deg,#4b250e,#754016 58%,#a87a34);border:8px double #c08c36;box-shadow:0 25px 45px rgba(42,24,8,.35);transform:rotate(-1deg)}.book-mock small{display:block;text-transform:uppercase;letter-spacing:.13em;margin-bottom:70px}.book-mock b{display:block;font-size:48px;text-transform:uppercase}.book-mock span{display:block;font-size:54px;margin:28px}.book-mock em{text-transform:uppercase}.details{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:28px 0}.details div{padding:15px;border-right:1px solid var(--line)}.details div:last-child{border:0}.details small,.details b{display:block}
.modal{position:fixed;z-index:100;inset:0;display:none}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(31,19,9,.68)}.modal-card{position:relative;z-index:2;width:min(820px,90vw);max-height:86vh;overflow:auto;margin:7vh auto;padding:45px 52px;background:#fff6df;border:8px double var(--gold);box-shadow:0 25px 70px #1e1208}.modal-card .close{position:absolute;right:18px;top:12px;border:0;background:none;font-size:34px;cursor:pointer}.modal-card>span{text-transform:uppercase;letter-spacing:.15em;color:#91601f}.modal-card h2{font-size:38px;font-weight:500}.modal-card #modalBody{font-size:18px;line-height:1.7;white-space:pre-line}
@media(max-width:1050px){#mainNav{display:none;position:absolute;top:78px;left:0;right:0;padding:22px;background:#f7e8c6;flex-direction:column;align-items:stretch}#mainNav.open{display:flex}.more-menu{position:static;display:grid!important;box-shadow:none;border:0;background:none}.menu-button{display:block}.home-image{height:100vh;aspect-ratio:auto;background-size:auto 100vh}.two-col,.synopsis-grid,.school-head,.buy-grid{grid-template-columns:1fr}.hero-grid,.people-grid,.placeholder-grid{grid-template-columns:repeat(2,1fr)}.book-mock{margin:auto}}
@media(max-width:650px){.inner{padding:105px 5% 60px}.page-head h1{font-size:42px}.paper,.letter{padding:28px}.hero-grid,.people-grid,.placeholder-grid,.author-grid{grid-template-columns:1fr}.timeline:before{left:10px}.chapter-card{margin-left:35px}.chapter-card:before{left:-33px}.details{grid-template-columns:1fr}.details div{border-right:0;border-bottom:1px solid var(--line)}}

.author-simple{max-width:1000px;margin:auto;display:grid;gap:28px}.author-simple .paper{padding:38px 46px}.author-simple h2{margin-bottom:16px}


/* ===== Version 3 refinements ===== */

/* Gentle page-specific parchment drawings */
.inner{
  position:relative;
  isolation:isolate;
  background-color:#f7edd6;
  background-image:
    radial-gradient(circle at 84% 10%,rgba(177,122,44,.12),transparent 31%),
    repeating-linear-gradient(0deg,rgba(92,62,27,.018) 0 1px,transparent 1px 5px),
    linear-gradient(110deg,#fffaf0,#ead7ad);
}
.inner:before{
  content:"";position:fixed;z-index:-1;inset:78px 0 0;pointer-events:none;opacity:.055;
  background-repeat:no-repeat;background-size:460px auto,380px auto;
  background-position:right -100px top 80px,left -100px bottom 30px;
  background-image:
    radial-gradient(circle,transparent 0 31%,#6f4a21 31.4% 31.8%,transparent 32.2% 46%,#6f4a21 46.4% 46.8%,transparent 47%),
    repeating-radial-gradient(circle at center,#6f4a21 0 1px,transparent 1.5px 35px);
}
#heroes.inner:before{background-image:repeating-linear-gradient(35deg,transparent 0 56px,#6f4a21 57px 58px,transparent 59px 112px);opacity:.025}
#journey.inner:before{background-image:linear-gradient(25deg,transparent 46%,#6f4a21 47% 47.4%,transparent 48%),linear-gradient(-25deg,transparent 46%,#6f4a21 47% 47.4%,transparent 48%);background-size:210px 150px;opacity:.035}
#scientists.inner:before,#beyond.inner:before{background-image:radial-gradient(circle,transparent 0 28%,#6f4a21 28.5% 29%,transparent 29.5% 43%,#6f4a21 43.5% 44%,transparent 44.5%);opacity:.045}
#authors.inner:before{opacity:.022}

/* Character portraits */
#heroes .hero-card{overflow:hidden;padding:0 0 28px}
#heroes .hero-card .hero-portrait{width:100%;aspect-ratio:1/1;display:block;object-fit:cover;object-position:center top;border-bottom:1px solid rgba(116,85,45,.18)}
#heroes .hero-card h2{margin:18px 28px 8px}
#heroes .hero-card p{margin:0;padding:0 28px}

/* Map without inaccurate dots. Entire map and all city buttons fit comfortably. */
.map-shell{position:relative;width:min(100%,1050px);margin:auto;border:6px double rgba(180,122,43,.52);box-shadow:0 16px 35px rgba(70,42,15,.16);background:#e7d0a1}
.map-shell img{display:block;width:100%;max-height:62vh;object-fit:contain;background:#ead7b1}
#mapMarkers,.map-marker{display:none!important}
.pill-list{max-width:1050px;margin:18px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:8px}
.pill-list button{font:inherit;font-size:15px;padding:9px 10px;border:1px solid var(--line);background:rgba(255,248,228,.9);color:var(--ink);cursor:pointer;transition:.18s}
.pill-list button:hover,.pill-list button:focus{background:#ead09a;border-color:#98631e;transform:translateY(-1px);box-shadow:0 5px 12px rgba(70,42,15,.12)}

/* Parents and teachers: compact and readable, without squeezing into an arbitrary viewport. */
#parents.inner{padding-top:104px}
#parents .page-head{margin-bottom:22px}
#parents .page-head h1{font-size:clamp(35px,4.2vw,50px)}
#parents .letter{max-width:1080px;padding:30px 40px;font-size:clamp(14px,1.15vw,16px);line-height:1.48}
#parents .lead-letter{font-size:clamp(17px,1.55vw,20px);margin-top:0}
#parents .letter-blocks{display:grid;grid-template-columns:1fr 1fr;column-gap:34px}
#parents .letter-blocks section{padding:12px 0}
#parents .letter-blocks h2{font-size:19px;margin:0 0 5px}
#parents .letter-blocks p{margin:0}
#parents .letter blockquote{grid-column:1/-1;margin:18px 0 12px;padding:16px 24px;font-size:17px;line-height:1.5}
#parents .actions{margin-top:16px}

/* Compact, understated Authors page */
#authors .page-head{margin-bottom:22px}
#authors .page-head span{font-size:11px;letter-spacing:.12em}
#authors .page-head h1{font-size:30px;font-weight:500;margin:6px 0}
#authors .author-simple{max-width:920px;margin:0 auto;display:grid;gap:14px}
#authors .author-simple .paper{padding:20px 24px;box-shadow:none;background:rgba(255,252,244,.58)}
#authors .author-simple h2{margin:0 0 8px;font-size:18px;font-weight:600}
#authors .author-simple p{margin:6px 0;font-size:14px;line-height:1.58}
#authors .author-simple .first-novel{color:#6f6254;font-size:13px}
#authors .page-head.compact{margin:34px 0 16px}
#authors .page-head.compact span{font-size:10px}
#authors .page-head.compact h2{margin:5px 0;font-size:20px;font-weight:500}
#authors .bibliography{max-width:920px;margin:0 auto;padding:18px 24px;box-shadow:none;background:rgba(255,252,244,.48)}
#authors .bibliography ol{margin:0;padding-left:22px}
#authors .bibliography li{margin:0 0 7px;padding-left:3px;font-size:12px;line-height:1.48;color:#554b40}

@media(max-width:760px){
  #parents .letter-blocks{grid-template-columns:1fr}
  #parents .letter{padding:24px}
  .map-shell img{max-height:none}
  .pill-list{grid-template-columns:repeat(2,1fr)}
}

/* =========================================================
   MASTER VERSION — final cover, cropped map and richer pages
   ========================================================= */

/* A calm parchment base with subtle paper grain. */
.inner {
  --page-sketch-opacity: .047;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #f5ead2;
  background-image:
    radial-gradient(ellipse at 10% 3%, rgba(171,119,46,.12), transparent 30%),
    radial-gradient(ellipse at 94% 86%, rgba(129,83,31,.09), transparent 32%),
    repeating-linear-gradient(0deg, rgba(77,49,21,.016) 0 1px, transparent 1px 4px),
    linear-gradient(115deg, #fffaf0 0%, #f4e8cf 52%, #e9d4a9 100%);
}

/* Faint manuscript-style drawings behind the content. */
.inner::before,
.inner::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  opacity: var(--page-sketch-opacity);
  background-repeat: no-repeat;
}

.inner::before {
  width: 520px;
  height: 520px;
  right: -145px;
  top: 112px;
  border: 2px solid #6e4923;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 44px transparent,
    inset 0 0 0 46px #6e4923,
    inset 0 0 0 102px transparent,
    inset 0 0 0 104px #6e4923;
}

.inner::after {
  left: -115px;
  bottom: -80px;
  width: 430px;
  height: 320px;
  background-image:
    linear-gradient(31deg, transparent 48.8%, #6e4923 49.1% 49.5%, transparent 49.8%),
    linear-gradient(-31deg, transparent 48.8%, #6e4923 49.1% 49.5%, transparent 49.8%),
    linear-gradient(90deg, transparent 49%, #6e4923 49.3% 49.7%, transparent 50%);
  background-size: 180px 130px;
}

/* Slightly different motifs for different sections. */
#about.inner,
#synopsis.inner {
  --page-sketch-opacity: .038;
}
#friend.inner {
  --page-sketch-opacity: .031;
}
#friend.inner::before {
  border-radius: 8px;
  border-width: 1px;
  transform: rotate(-7deg);
  box-shadow:
    inset 0 0 0 28px transparent,
    inset 0 0 0 29px #6e4923,
    inset 0 0 0 68px transparent,
    inset 0 0 0 69px #6e4923;
}
#parents.inner {
  --page-sketch-opacity: .034;
}
#chapters.inner::after {
  background-image:
    repeating-linear-gradient(90deg, transparent 0 39px, #6e4923 40px 41px, transparent 42px 80px),
    repeating-linear-gradient(0deg, transparent 0 39px, #6e4923 40px 41px, transparent 42px 80px);
  background-size: 160px 160px;
  transform: rotate(11deg);
}
#heroes.inner {
  --page-sketch-opacity: .024;
}
#heroes.inner::after {
  width: 520px;
  height: 390px;
  background-image:
    radial-gradient(ellipse at 18% 28%, transparent 0 9%, #6e4923 9.4% 9.8%, transparent 10.2%),
    radial-gradient(ellipse at 48% 21%, transparent 0 10%, #6e4923 10.4% 10.8%, transparent 11.2%),
    radial-gradient(ellipse at 77% 30%, transparent 0 8%, #6e4923 8.4% 8.8%, transparent 9.2%),
    linear-gradient(66deg, transparent 46%, #6e4923 46.3% 46.7%, transparent 47%);
  background-size: 100% 100%;
}
#journey.inner {
  --page-sketch-opacity: .027;
}
#journey.inner::before {
  border-radius: 45% 55% 46% 54%;
  transform: rotate(13deg);
}
#scientists.inner,
#beyond.inner,
#games.inner,
#teachers.inner {
  --page-sketch-opacity: .041;
}
#authors.inner {
  --page-sketch-opacity: .018;
}
#buy.inner {
  --page-sketch-opacity: .030;
  background-image:
    radial-gradient(ellipse at 82% 6%, rgba(54,83,112,.10), transparent 34%),
    repeating-linear-gradient(0deg, rgba(77,49,21,.014) 0 1px, transparent 1px 4px),
    linear-gradient(115deg, #fffaf0 0%, #f2e4c9 58%, #e5d1a7 100%);
}

/* Keep cards readable above decorative backgrounds. */
.paper,
.quote-card,
.symbol-card,
.hero-card,
.preview-card,
.construction,
.future-book,
.school,
.chapter-card,
.letter {
  backdrop-filter: blur(.4px);
}

/* New cropped map — no extra frame and no inaccurate markers. */
.map-shell {
  position: relative;
  width: min(100%, 1120px);
  margin: 0 auto;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  box-shadow: 0 17px 38px rgba(70,42,15,.15);
}
.map-shell img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  background: transparent;
}
#mapMarkers,
.map-marker {
  display: none !important;
}
.pill-list {
  width: min(100%, 1120px);
  margin: 17px auto 0;
  grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
}
.pill-list button {
  border-radius: 2px;
}

/* Real final book cover. */
.buy-grid {
  max-width: 1060px;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  align-items: center;
}
.book-cover-wrap {
  width: min(100%, 340px);
  margin: 0 auto;
  padding: 0;
}
.book-cover-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  box-shadow: 0 25px 50px rgba(35,28,22,.28);
}
.book-mock {
  display: none;
}

@media (max-width: 1050px) {
  .buy-grid {
    grid-template-columns: 1fr;
  }
  .book-cover-wrap {
    width: min(72vw, 330px);
  }
}
@media (max-width: 760px) {
  .inner::before {
    width: 340px;
    height: 340px;
    right: -180px;
  }
  .inner::after {
    width: 300px;
    height: 240px;
  }
  .map-shell img {
    max-height: none;
  }
}

/* ===== Version 1 — compact home page =====
   The complete 1536×1024 home artwork now fits inside the browser window.
   Nothing is cropped and the visitor does not need to scroll to see it. */
.home-page {
  min-height: 100vh;
  padding: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255,250,238,.98), rgba(231,207,163,.96));
}
.home-page.active {
  display: grid;
  place-items: center;
}
.home-image {
  width: min(calc(100vw - 32px), calc((100vh - 32px) * 1.5));
  height: auto;
  aspect-ratio: 3 / 2;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow: 0 14px 35px rgba(70,42,15,.16);
}

@media (max-width: 1050px) {
  .home-image {
    width: min(calc(100vw - 20px), calc((100vh - 20px) * 1.5));
    height: auto;
    aspect-ratio: 3 / 2;
    background-size: 100% 100%;
  }
  .home-page {
    padding: 10px;
  }
}

/* Version 1 — journey buttons restored to the right of the map. */
.map-layout {
  width: min(100%, 1280px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 20px;
  align-items: start;
}
.map-layout .map-shell {
  width: 100%;
  margin: 0;
}
.map-layout .pill-list {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-content: start;
}
.map-layout .pill-list button {
  width: 100%;
  text-align: left;
}

@media (max-width: 900px) {
  .map-layout {
    grid-template-columns: 1fr;
  }
  .map-layout .pill-list {
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    margin-top: 12px;
  }
  .map-layout .pill-list button {
    text-align: center;
  }
}

/* ===== Master Version 1.1: reading windows and compact heroes ===== */

/* Long reference articles: book-like typography across the full card width. */
.modal-card{
  overflow-y:auto;
  scrollbar-gutter:stable;
}
.modal-card .close{
  position:sticky;
  z-index:8;
  float:right;
  top:8px;
  right:8px;
  width:42px;
  height:42px;
  margin:-28px -34px 0 18px;
  display:grid;
  place-items:center;
  border:1px solid rgba(130,83,25,.55);
  border-radius:50%;
  background:rgba(255,246,223,.96);
  color:#553313;
  font-size:31px;
  line-height:1;
  box-shadow:0 4px 14px rgba(54,31,10,.18);
}
.modal-card .close:hover,
.modal-card .close:focus{
  background:#ead09a;
  outline:2px solid rgba(130,83,25,.28);
}
.modal-card #modalBody{
  white-space:normal;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}
.modal-card #modalBody p{
  margin:0;
  text-indent:1.65em;
}
.modal-card #modalBody p + p{
  margin-top:.38em;
}
.modal-card #modalBody .modal-section-title{
  margin:1.25em 0 .38em;
  font-size:1.08em;
  font-weight:700;
  line-height:1.35;
  text-align:left;
}

/* Heroes: all six cards fit in one desktop view without losing the parchment style. */
#heroes.inner{
  padding-top:96px;
  padding-left:3%;
  padding-right:3%;
  padding-bottom:34px;
}
#heroes .page-head{
  margin-bottom:14px;
}
#heroes .page-head h1{
  margin:2px 0;
  font-size:clamp(38px,4vw,50px);
}
#heroes .intro{
  max-width:1180px;
  margin-bottom:18px;
  font-size:16px;
  line-height:1.42;
  text-align:center;
}
#heroes .hero-grid{
  max-width:1450px;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
}
#heroes .hero-card{
  padding-bottom:14px;
}
#heroes .hero-card .hero-portrait{
  aspect-ratio:4/3;
  max-height:172px;
}
#heroes .hero-card h2{
  margin:9px 12px 4px;
  font-size:22px;
}
#heroes .hero-card p{
  margin:0;
  padding:0 12px;
  font-size:13.5px;
  line-height:1.38;
}
#heroes .actions{
  margin-top:15px;
}
#heroes .button{
  padding:10px 18px;
}

@media(max-width:1250px){
  #heroes .hero-grid{grid-template-columns:repeat(3,1fr)}
  #heroes .hero-card .hero-portrait{max-height:190px}
}
@media(max-width:760px){
  #heroes .hero-grid{grid-template-columns:repeat(2,1fr)}
  #heroes .hero-card p{font-size:14px}
  .modal-card{padding:42px 28px}
  .modal-card .close{margin:-26px -16px 0 12px}
}
@media(max-width:480px){
  #heroes .hero-grid{grid-template-columns:1fr}
}

/* ===== Master Version 1.2: complete portraits, cleaner articles, compact synopsis ===== */

/* Show each portrait in full rather than cropping the forehead, chin, or sides. */
#heroes .hero-card .hero-portrait{
  object-fit:contain;
  object-position:center center;
  background:linear-gradient(180deg,rgba(235,218,180,.72),rgba(255,249,232,.95));
}

/* Reference articles: paragraph breaks come from the source meaning, not PDF page wraps. */
.modal-card #modalBody p + p{
  margin-top:.62em;
}

/* Keep the synopsis readable in one desktop view. */
#synopsis.inner{
  padding-top:90px;
  padding-bottom:28px;
  padding-left:4%;
  padding-right:4%;
}
#synopsis .page-head{
  margin-bottom:14px;
}
#synopsis .page-head span{
  font-size:12px;
}
#synopsis .page-head h1{
  margin:2px 0;
  font-size:clamp(38px,4vw,50px);
}
#synopsis .synopsis-grid{
  max-width:1360px;
  grid-template-columns:minmax(0,2.65fr) minmax(230px,.72fr);
  gap:18px;
}
#synopsis .paper{
  padding:24px 34px;
  font-size:16.5px;
  line-height:1.48;
  text-align:justify;
  hyphens:auto;
}
#synopsis .paper p{
  margin:.58em 0;
  text-indent:1.55em;
}
#synopsis .paper p:first-child{
  margin-top:0;
}
#synopsis .paper .actions{
  margin-top:14px;
  justify-content:center;
}
#synopsis .paper .button{
  padding:10px 18px;
}
#synopsis .side-stack{
  gap:14px;
}
#synopsis .symbol-card{
  padding:18px 18px;
}
#synopsis .symbol-card>span{
  width:62px;
  height:62px;
  font-size:34px;
}
#synopsis .symbol-card b{
  margin:8px 0 5px;
  font-size:20px;
}
#synopsis .symbol-card p{
  margin:5px 0;
  font-size:15px;
  line-height:1.4;
}

@media(max-width:1050px){
  #synopsis .synopsis-grid{grid-template-columns:1fr}
  #synopsis .side-stack{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:650px){
  #synopsis .side-stack{grid-template-columns:1fr}
  #synopsis .paper{padding:25px;font-size:16px}
}


/* ===== Master Version 1.3 ===== */
/* One consistent navigation bar on every page, including Home. */
.site-header.is-hidden{display:flex}
.home-page{padding:78px 16px 16px;min-height:100vh}
.home-page.active{display:grid}
.home-image{
  width:min(calc(100vw - 32px),calc((100vh - 94px)*1.5));
  max-height:calc(100vh - 94px);
  clip-path:inset(5.8% 0 0 0);
  margin-top:-3.4%;
}
.h-synopsis{display:none!important}

/* Compact literary pages with quiet illustrated backgrounds. */
.compact-literary,#friend.inner,#parents.inner{padding-top:92px;padding-bottom:24px}
.compact-literary .page-head,#friend .page-head,#parents .page-head{margin-bottom:12px}
.compact-literary .page-head h1,#friend .page-head h1,#parents .page-head h1{font-size:clamp(34px,4vw,48px);margin:2px 0}
.literary-panel,#friend .letter,#parents .letter{
  position:relative;z-index:1;max-width:1180px;margin:auto;
  background:rgba(255,249,232,.88);border:1px solid var(--line);
  box-shadow:0 16px 38px rgba(70,42,15,.13);
}
.literary-panel{padding:24px 48px 26px;font-size:clamp(14px,1.02vw,16.5px);line-height:1.42;text-align:justify;hyphens:auto}
.literary-panel h2{text-align:center;font-size:clamp(24px,2.4vw,32px);font-weight:500;margin:0 0 12px}
.literary-panel p{margin:.4em 0;text-indent:1.7em}
.about-page::before{content:"";position:absolute;inset:78px 0 0;background:
  linear-gradient(to top,rgba(116,79,35,.14),transparent 31%),
  radial-gradient(ellipse at 8% 86%,rgba(116,79,35,.12),transparent 24%),
  radial-gradient(ellipse at 92% 12%,rgba(116,79,35,.10),transparent 26%);pointer-events:none}
.about-page::after{content:"⌁  ◁  △  ◯  ▱  𓂀";position:absolute;left:3%;right:3%;bottom:18px;text-align:center;font-size:48px;letter-spacing:.45em;color:rgba(103,69,31,.105);pointer-events:none}
#friend .letter{max-width:1080px;padding:28px 48px;font-size:clamp(15px,1.15vw,17px);line-height:1.5;text-align:justify}
#friend .letter p{margin:.55em 0;text-indent:1.7em}
#friend .lead-letter{text-indent:0;font-size:clamp(18px,1.6vw,21px)}
#friend.inner{background:
  radial-gradient(circle at 12% 78%,rgba(201,142,50,.16),transparent 21%),
  radial-gradient(circle at 88% 18%,rgba(84,119,151,.12),transparent 23%),
  repeating-linear-gradient(0deg,rgba(112,78,34,.018) 0 1px,transparent 1px 5px),
  linear-gradient(110deg,#fff9ea,#ead6aa)}
#friend.inner::after{content:"✦   ⛵   △   ◯   ✧";position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:42px;letter-spacing:.55em;color:rgba(109,73,30,.12)}
#parents .letter{padding:24px 38px;font-size:clamp(13.5px,1vw,15.5px);line-height:1.42}
#parents .letter-blocks section{padding:8px 0}
#parents .letter-blocks h2{font-size:18px}
#parents .letter blockquote{margin:12px 0 8px;padding:12px 20px;font-size:16px}
#parents.inner{background:
  linear-gradient(135deg,transparent 0 72%,rgba(105,74,38,.055) 72% 73%,transparent 73% 100%),
  repeating-radial-gradient(circle at 9% 88%,rgba(105,74,38,.045) 0 1px,transparent 1px 18px),
  linear-gradient(110deg,#fff9ea,#ead6aa)}

/* Appendix-faithful scientist typography. */
.modal-card #modalBody{white-space:normal;text-align:justify;hyphens:auto}
.modal-card #modalBody p{margin:.62em 0;text-indent:1.7em}
.modal-card #modalBody .scientist-date{text-align:center;text-indent:0;font-style:italic;margin:-.2em 0 1em}
.modal-section-title{font-size:20px!important;font-weight:700!important;margin:1.15em 0 .35em!important;text-align:left}
.school-description{max-height:190px}
.school-description p,.appendix-text p{margin:.55em 0;text-indent:1.55em;text-align:justify;line-height:1.55}
.school-description .scientist-date{text-indent:0;text-align:center;font-style:italic}
.school-head.single{grid-template-columns:1fr}
.special-school{max-width:1050px}
.special-appendix{padding:4px 10px 0;font-size:17px}
.special-appendix .school-subtitle{font-size:20px;text-align:center;margin:0 0 14px;font-weight:500}
.special-appendix p{margin:.75em 0}
.special-appendix strong{font-weight:700}

@media(max-width:1050px){
  .home-page{padding:78px 10px 10px}
  .home-image{width:min(calc(100vw - 20px),calc((100vh - 88px)*1.5));max-height:calc(100vh - 88px)}
}
@media(max-width:650px){
  .literary-panel,#friend .letter,#parents .letter{padding:22px 24px}
  .literary-panel{font-size:15px;line-height:1.48}
}

/* ===== Master Version 1.4 editorial polish ===== */
.journey-intro,.scientists-intro{
  max-width:1120px;
  margin:0 auto 22px;
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
  line-height:1.5;
}
.journey-intro p,.scientists-intro p{
  margin:.42em 0;
  text-indent:1.65em;
}
#parents .letter-blocks h2{
  font-weight:700;
}
.modal-card #modalBody p{
  white-space:normal;
}

/* ===== Home page frame refinement =====
   Home only: remove the duplicated artwork header, keep the master site header,
   and present the artwork with one continuous Greek-key perimeter frame. */
#home.home-page{
  padding:78px 16px 16px;
  min-height:100vh;
  overflow:hidden;
}
#home .home-image{
  width:min(calc(100vw - 32px),calc((100vh - 94px) * 1.630573));
  max-height:calc(100vh - 94px);
  aspect-ratio:1536 / 942;
  margin-top:0;
  clip-path:none;
  background-image:url("assets/home-framed.png");background-image:image-set(url("assets/home-framed.webp") type("image/webp"),url("assets/home-framed.png") type("image/png"));
  background-position:center;
  background-size:100% 100%;
  background-repeat:no-repeat;
  box-shadow:0 14px 35px rgba(70,42,15,.16);
}
#home .h-about,
#home .h-heroes,
#home .h-journey,
#home .h-scientists,
#home .h-beyond,
#home .h-games,
#home .h-teachers{display:none!important}

@media(max-width:1050px){
  #home.home-page{padding:78px 10px 10px}
  #home .home-image{
    width:min(calc(100vw - 20px),calc((100vh - 88px) * 1.630573));
    max-height:calc(100vh - 88px);
  }
}