*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#090b0a;color:#e5d8ba;font-family:Georgia,"Times New Roman",serif;overflow-x:hidden}body.locked{overflow:hidden}:root{--gold:#d5b868;--paper:#ddc99a;--pink:#f35aaa}img{display:block}.cinema,.handoff{position:fixed;inset:0;z-index:1000;background:#000}.cinema video{width:100%;height:100%;object-fit:cover}.vignette{position:absolute;inset:0;background:radial-gradient(circle,transparent 43%,rgba(0,0,0,.56) 100%),linear-gradient(180deg,rgba(0,0,0,.25),transparent 25%,transparent 75%,rgba(0,0,0,.42));pointer-events:none}.cinema button{position:absolute;right:28px;bottom:25px;padding:10px 15px;background:#0a0a0a99;border:1px solid #d8c48a77;color:#eadcae;letter-spacing:.2em;font-size:9px}.handoff{display:none;overflow:hidden}.handoff .field{position:absolute;inset:-2%;background:url('/assets/ride-end.jpg') center/cover no-repeat;filter:saturate(.78) brightness(.82)}#fish{position:absolute;width:min(46vw,700px);right:-5vw;bottom:-5vh;z-index:2;opacity:0;filter:drop-shadow(0 25px 25px #0009)}#dih{position:absolute;width:min(8vw,115px);left:39%;bottom:22%;z-index:4;opacity:0;filter:drop-shadow(0 10px 8px #0009)}#impact{position:absolute;inset:0;display:grid;place-items:center;z-index:8;font:900 clamp(70px,17vw,270px)/1 Impact,sans-serif;color:#e5cf96;letter-spacing:.04em;opacity:0;text-shadow:0 8px 0 #3d3422,0 20px 50px #000}
#main{opacity:0}.hero{height:110vh;position:relative;overflow:hidden;background:radial-gradient(circle at 72% 55%,#f35aaa20,transparent 28%),linear-gradient(#10140f,#080a09)}.grain{position:absolute;inset:0;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.nav{position:absolute;left:4vw;right:4vw;top:30px;display:flex;justify-content:space-between;z-index:4;letter-spacing:.22em;font-size:10px}.nav b{font:900 30px Impact,sans-serif;color:#f2a9cf;letter-spacing:.03em}.heroText{position:absolute;left:6vw;top:23vh;z-index:3}.heroText small,.bookCopy small,.token small{letter-spacing:.3em;color:var(--gold);font-size:10px}.heroText h1{font:900 clamp(180px,31vw,480px)/.72 Impact,sans-serif;letter-spacing:-.06em;margin:28px 0 42px;color:#d8c69a;text-shadow:0 10px 0 #4b402a}.heroText p{letter-spacing:.2em;line-height:1.8;font-size:12px}.heroFish{position:absolute;width:min(57vw,900px);right:-5vw;bottom:-5vh;filter:drop-shadow(0 35px 45px #000b);animation:float 7s ease-in-out infinite}@keyframes float{50%{transform:translateY(-20px)}}.down{position:absolute;bottom:35px;left:50%;font-size:8px;letter-spacing:.28em;opacity:.5}
.bookZone{height:420vh;background:#0b0e0b;position:relative}.bookSticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 110%,#e0c88318,transparent 43%)}.bookCopy{position:absolute;right:7vw;width:29vw;z-index:1}.bookCopy h2,.chapter h2,.token h2{font:900 clamp(60px,8vw,125px)/.82 Impact,sans-serif;color:#d8c69a;margin:20px 0;text-shadow:0 4px 0 #453b28}.bookCopy p{line-height:1.8;opacity:.55}.book{width:min(31vw,460px);aspect-ratio:3/4;position:relative;perspective:1800px;transform-style:preserve-3d}.book>div{position:absolute;inset:0}.cover{z-index:3;background:radial-gradient(circle,#563044,#171511 70%);border:9px solid #493c29;transform-origin:left center;display:grid;place-items:center;transform-style:preserve-3d;backface-visibility:hidden}.cover b{font:900 clamp(70px,9vw,130px) Impact,sans-serif;color:#e6b1ce;z-index:2}.cover span{position:absolute;bottom:8%;font-size:9px;letter-spacing:.2em;color:#d9bd72}.ring{position:absolute;width:68%;aspect-ratio:1;border:2px solid #c19d50;border-radius:50%;box-shadow:inset 0 0 35px #c19d5030}.page{background:#bda879;padding:5%;color:#322617;display:flex;flex-direction:column;justify-content:center}.page img{width:100%;box-shadow:0 10px 30px #0006}.page p{text-align:center;font-size:11px;letter-spacing:.1em}
.chapter{padding:13vw 7vw 8vw;background:#0b0d0b}.chapterNo{color:var(--gold);font-size:9px;letter-spacing:.25em}.chapter h2{font-size:clamp(85px,13vw,190px);max-width:1000px}.lead{max-width:520px;line-height:1.9;opacity:.55}
.journey{background:#090b0a;padding:0 4vw 12vw;display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.relic{margin:0;position:relative;aspect-ratio:9/14;overflow:hidden;background:#111}.relic:nth-child(2),.relic:nth-child(6),.relic:nth-child(10){transform:translateY(7vw)}.relic img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .8s}.relic:hover img{transform:scale(1.055);filter:contrast(1.05)}.shade{position:absolute;inset:0;background:linear-gradient(transparent 50%,#000c)}.relic figcaption{position:absolute;left:25px;right:25px;bottom:25px}.relic figcaption span{font-size:9px;letter-spacing:.2em;color:var(--gold)}.relic h3{margin:8px 0;font-size:25px;letter-spacing:.08em}.relic p{font-size:12px;opacity:.6;line-height:1.6}
.token{padding:12vw 7vw;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;background:radial-gradient(circle at 25% 50%,#f35aaa18,transparent 28%),#0d100d}.token h2{font-size:clamp(120px,19vw,280px)}.token p{max-width:440px;line-height:1.9;opacity:.55}.facts{display:grid;grid-template-columns:1fr 1fr}.facts article{min-height:170px;border:1px solid #d5b86818;padding:25px;display:flex;flex-direction:column;justify-content:space-between}.facts b{font-size:10px;letter-spacing:.2em;color:var(--gold)}.facts span{font-size:20px}
footer{min-height:105vh;background:#080a08;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden}footer img{width:min(39vw,580px);margin-bottom:-5vw;filter:drop-shadow(0 30px 40px #000)}footer h2{font:900 clamp(160px,28vw,430px)/.7 Impact,sans-serif;margin:0;color:#d8c69a;text-shadow:0 10px 0 #453b28}footer p{font-size:20px;letter-spacing:.2em;color:#e4a7c8}footer small{margin-top:45px;letter-spacing:.25em;opacity:.4}
.reveal{opacity:0;transform:translateY(45px);filter:blur(6px);transition:1s cubic-bezier(.16,1,.3,1)}.reveal.in{opacity:1;transform:none;filter:none}
@media(max-width:800px){.heroText h1{font-size:45vw}.heroFish{width:88vw;right:-30vw}.bookCopy{width:55vw;right:auto;left:6vw;top:12vh}.book{width:57vw;transform:translateY(15vh)}.journey{grid-template-columns:1fr 1fr}.relic:nth-child(n){transform:none}.token{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}#fish{width:82vw;right:-24vw}#dih{width:16vw}.nav span{display:none}}
/* v3: exact Lore of PUH book cover + denser collage */
.image-cover{padding:0!important;border:0!important;background:#0b0b0a!important;overflow:hidden}
.image-cover>img{width:100%;height:100%;object-fit:cover;display:block}
.journey{max-width:1420px;margin:0 auto;padding:0 3vw 10vw;grid-template-columns:repeat(5,1fr);gap:9px;align-items:start}
.relic{aspect-ratio:9/13;border:1px solid rgba(213,184,104,.08);border-radius:2px}
.relic:nth-child(n){transform:none}
.relic:nth-child(1),.relic:nth-child(6),.relic:nth-child(11){grid-row:span 2;aspect-ratio:9/15}
.relic:nth-child(4),.relic:nth-child(9),.relic:nth-child(13){transform:translateY(28px)}
.relic figcaption{left:13px;right:13px;bottom:12px}
.relic h3{font-size:16px;margin:5px 0}
.relic p{font-size:10px;line-height:1.45;margin:0}
.relic figcaption span{font-size:7px}
@media(max-width:1050px){.journey{grid-template-columns:repeat(4,1fr)}}
@media(max-width:720px){.journey{grid-template-columns:repeat(2,1fr);gap:6px}.relic:nth-child(n){grid-row:auto;transform:none;aspect-ratio:9/13}.relic h3{font-size:15px}}

#dih{width:min(11vw,165px)}
@media(max-width:800px){#dih{width:20vw}}

/* v4: solid fish, $PUH reveal, poem, 2x4 lore carousel */
.bookPoem{padding:14px 8px 4px;text-align:center;color:#3a2a19}
.bookPoem p{font-size:12px!important;line-height:1.7!important;letter-spacing:.03em!important;margin:0!important;font-style:italic}

.journeyWrap{
  position:relative;background:#090b0a;padding:0 5vw 12vw;max-width:1500px;margin:0 auto;
}
.journeyViewport{overflow:hidden;width:100%}
.journey{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-rows:auto;
  gap:10px!important;
  padding:0!important;
  margin:0!important;
  max-width:none!important;
  transition:transform .65s cubic-bezier(.16,1,.3,1);
  align-items:stretch;
}
.relic{
  aspect-ratio:4/5!important;
  min-width:0;
  transform:none!important;
  grid-row:auto!important;
}
.relic figcaption{left:12px!important;right:12px!important;bottom:11px!important}
.relic h3{font-size:15px!important;margin:4px 0!important}
.relic p{font-size:9px!important;line-height:1.35!important;margin:0!important}
.relic figcaption span{font-size:7px!important}
.galleryArrow{
  position:absolute;top:44%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(213,184,104,.35);
  background:rgba(9,11,10,.82);color:#e6d2a0;
  font-size:30px;line-height:1;cursor:pointer;backdrop-filter:blur(8px)
}
.galleryArrow.left{left:1vw}.galleryArrow.right{right:1vw}
.galleryArrow:disabled{opacity:.22;cursor:default}
.galleryDots{display:flex;justify-content:center;gap:8px;margin-top:18px}
.galleryDots button{width:7px;height:7px;border-radius:50%;border:0;background:#6e6248;padding:0;cursor:pointer}
.galleryDots button.active{background:#d5b868}

#impact{letter-spacing:.03em}
#dih{width:min(11.5vw,170px)!important}
@media(max-width:800px){
  #dih{width:20vw!important}
  .journeyWrap{padding-left:4vw;padding-right:4vw}
  .journey{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .galleryArrow{width:38px;height:38px;font-size:26px}
}

/* v5: $PUH hero typography + legit two-page lore book + X links */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=IM+Fell+English:ital@0;1&display=swap');

.navRight{display:flex;align-items:center;gap:28px}
.nav a,.xFooter{color:#eadcae;text-decoration:none;letter-spacing:.18em;font-size:9px}
.nav a:hover,.xFooter:hover{color:#f0a9cc}

.heroText h1{
  font-family:"Cinzel",Georgia,serif!important;
  font-weight:800!important;
  letter-spacing:-.07em!important;
  font-size:clamp(150px,25vw,390px)!important;
  line-height:.76!important;
  text-shadow:0 7px 0 #4b402a,0 18px 45px rgba(0,0,0,.45)!important;
}

.book{
  width:min(62vw,900px)!important;
  aspect-ratio:1.48/1!important;
  position:relative;
  perspective:2200px;
  transform-style:preserve-3d;
}
.cover{
  inset:0!important;
  transform-origin:left center!important;
  box-shadow:0 30px 70px rgba(0,0,0,.6);
}
.bookSpread{
  display:grid!important;
  grid-template-columns:1fr 18px 1fr;
  gap:0;
  padding:0!important;
  background:#c8b27f!important;
  overflow:hidden;
  box-shadow:inset 0 0 35px rgba(49,31,13,.36),0 26px 70px rgba(0,0,0,.45);
  border:1px solid #7a6240;
}
.bookLeaf{
  position:relative;
  min-width:0;
  padding:7% 7% 6%;
  color:#2d2115;
  background:
    radial-gradient(circle at 50% 40%,rgba(255,246,214,.15),transparent 50%),
    linear-gradient(90deg,#bda574 0%,#d4c08e 12%,#d0ba87 82%,#b49b6d 100%);
  font-family:"IM Fell English",Georgia,serif;
}
.leftLeaf{box-shadow:inset -18px 0 24px rgba(63,44,21,.16)}
.rightLeaf{box-shadow:inset 18px 0 24px rgba(63,44,21,.16)}
.bookGutter{
  background:linear-gradient(90deg,#8d744d,#3d2f1e 48%,#8e754d);
  box-shadow:0 0 18px rgba(0,0,0,.55);
  z-index:2;
}
.pageNumber{
  text-align:center;font-size:10px;letter-spacing:.22em;opacity:.58;margin-bottom:13px
}
.printedImage{
  border:1px solid rgba(55,37,17,.5);
  padding:8px;
  background:#ab9366;
  box-shadow:0 4px 12px rgba(47,31,16,.22)
}
.printedImage img{
  width:100%;height:auto;max-height:64vh;object-fit:cover;
  filter:sepia(.13) contrast(.97) saturate(.88);
}
.caption{
  text-align:center;margin-top:13px;font-size:11px;letter-spacing:.22em
}
.rightLeaf h3{
  text-align:center;font-family:"Cinzel",Georgia,serif;font-size:clamp(16px,1.6vw,25px);
  line-height:1.15;letter-spacing:.08em;margin:20px 0 8px;color:#3a2a19
}
.ornament{text-align:center;font-size:18px;margin:10px 0 16px;color:#715531}
.poem{
  text-align:center!important;
  font-size:clamp(12px,1.08vw,16px)!important;
  line-height:1.64!important;
  letter-spacing:.015em!important;
  margin:0!important;
  font-style:italic
}
.bookSig{
  position:absolute;left:0;right:0;bottom:6%;
  text-align:center;font-size:11px;letter-spacing:.06em;opacity:.72
}
.xFooter{
  margin-top:24px;padding:12px 18px;border:1px solid rgba(213,184,104,.28);
  border-radius:999px
}
footer small{margin-top:28px!important}

@media(max-width:800px){
  .navRight span{display:none}
  .book{width:88vw!important;aspect-ratio:1.35/1!important}
  .bookLeaf{padding:6% 5%}
  .rightLeaf h3{font-size:14px}
  .poem{font-size:10px!important;line-height:1.45!important}
  .bookSig{font-size:9px}
}

/* v6: fix closed book being cropped */
.book{
  width:min(68vw,980px)!important;
  aspect-ratio:1.52/1!important;
  position:relative!important;
  overflow:visible!important;
}
.book .cover{
  left:25%!important;
  right:auto!important;
  top:0!important;
  bottom:auto!important;
  width:50%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
  transform-origin:left center!important;
  z-index:5!important;
}
.book .cover>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  filter:drop-shadow(0 28px 36px rgba(0,0,0,.55));
}
.book .page.bookSpread{
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:100%!important;
  height:100%!important;
  z-index:1!important;
}
.bookSticky{
  overflow:visible!important;
}
@media(max-width:800px){
  .book{
    width:94vw!important;
    aspect-ratio:1.42/1!important;
  }
  .book .cover{
    left:24%!important;
    width:52%!important;
  }
}

/* v7: use exact transparent PUH art */
.heroFish{
  width:min(48vw,760px)!important;
  right:1vw!important;
  bottom:3vh!important;
  object-fit:contain!important;
  filter:drop-shadow(0 35px 45px rgba(0,0,0,.68))!important;
}
#fish{
  width:min(40vw,620px)!important;
  right:1vw!important;
  bottom:4vh!important;
  object-fit:contain!important;
}
footer img{
  width:min(34vw,500px)!important;
  object-fit:contain!important;
}
@media(max-width:800px){
  .heroFish{width:76vw!important;right:-10vw!important}
  #fish{width:72vw!important;right:-10vw!important}
  footer img{width:62vw!important}
}

/* v8 — layered gothic DIH-style PUH hero using supplied bg-body.webp + tiang.webp */
.heroGothic{
  height:100vh!important;
  min-height:720px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#11150f!important;
}
.heroBg{
  position:absolute;
  inset:-2%;
  z-index:0;
  background-image:url('/assets/bg-body.webp');
  background-size:cover;
  background-position:center 48%;
  transform:scale(1.035);
  filter:brightness(.78) saturate(.72) contrast(1.06);
}
.heroAtmosphere{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(5,8,5,.48) 0%,rgba(5,8,5,.14) 42%,rgba(5,8,5,.03) 66%,rgba(5,8,5,.22) 100%),
    linear-gradient(180deg,rgba(4,7,4,.15),transparent 52%,rgba(4,7,4,.42));
}
.heroGothic .grain{z-index:2}
.heroGothic .nav{z-index:8}
.gothicText{
  left:5.5vw!important;
  top:20vh!important;
  z-index:6!important;
  width:53vw;
}
.gothicText small{
  color:#e4c879!important;
  text-shadow:0 2px 8px #000;
}
.gothicText h1{
  margin:20px 0 30px!important;
  font-family:"Cinzel",Georgia,serif!important;
  font-size:clamp(135px,20vw,320px)!important;
  line-height:.78!important;
  color:#d9b05d!important;
  letter-spacing:-.055em!important;
  text-shadow:
    0 3px 0 #8d6328,
    0 7px 0 #49351c,
    0 16px 30px rgba(0,0,0,.55)!important;
}
.gothicText>p{
  margin:0 0 25px;
  color:#e7d5a4;
  font-size:13px!important;
  letter-spacing:.17em!important;
  text-shadow:0 2px 6px #000;
}
.heroActions{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-top:25px;
}
.diamondBtn{
  width:58px;height:58px;
  position:relative;
  display:grid;place-items:center;
  color:#e6d29d!important;
  text-decoration:none!important;
  background:rgba(22,20,14,.88);
  border:1px solid rgba(213,184,104,.32);
  transform:rotate(45deg);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.diamondBtn span{
  transform:rotate(-45deg);
  font:700 20px Georgia,serif;
}
.diamondBtn em{
  position:absolute;
  top:72px;left:50%;
  transform:translateX(-50%) rotate(-45deg);
  font-style:normal;
  font-size:7px;
  letter-spacing:.18em;
  white-space:nowrap;
  opacity:0;
  transition:opacity .2s ease;
}
.diamondBtn:hover{
  transform:rotate(45deg) translate(-3px,-3px);
  background:rgba(47,39,23,.94);
  border-color:#d5b868;
}
.diamondBtn:hover em{opacity:.8}
.disabledBuy{opacity:.5;cursor:not-allowed}
.buyNote{
  margin-top:35px;
  font-size:7px;
  letter-spacing:.22em;
  color:#c6ae73;
  opacity:.65;
}
.gothicFish{
  z-index:5!important;
  width:min(35vw,590px)!important;
  right:5.2vw!important;
  bottom:1.5vh!important;
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.55))!important;
}
.heroPillar{
  position:absolute;
  z-index:7;
  left:-1.5vw;
  top:-2vh;
  height:105vh;
  width:auto;
  pointer-events:none;
  filter:brightness(.82) saturate(.78) drop-shadow(12px 0 18px rgba(0,0,0,.35));
}
.heroGothic .down{z-index:8;color:#e2cd91;text-shadow:0 2px 5px #000}

@media(max-width:900px){
  .heroGothic{min-height:650px}
  .heroBg{background-position:center}
  .heroPillar{height:101vh;left:-80px;opacity:.82}
  .gothicText{left:7vw!important;top:19vh!important;width:72vw}
  .gothicText h1{font-size:clamp(105px,26vw,230px)!important}
  .gothicFish{width:49vw!important;right:-7vw!important;bottom:5vh!important}
}
@media(max-width:600px){
  .heroPillar{left:-115px;opacity:.62}
  .gothicText{top:18vh!important;width:88vw}
  .gothicText h1{font-size:29vw!important}
  .gothicText>p{font-size:10px!important}
  .gothicFish{width:70vw!important;right:-24vw!important;bottom:7vh!important}
  .heroActions{gap:15px}
  .diamondBtn{width:50px;height:50px}
  .navRight a{font-size:7px}
}

/* v9 — exact supplied main-page hero background */
.heroGothic .heroBg{
  background-image:url('/assets/hero_bg.webp')!important;
  background-size:cover!important;
  background-position:center center!important;
  transform:scale(1.01)!important;
  filter:brightness(.72) saturate(.78) contrast(1.04)!important;
}
/* keep the separate ivy pillar as a subtle foreground depth layer */
.heroPillar{
  opacity:.72!important;
}

/* v10 — continuous gothic pillars + repaired lore-book section */

/* Keep the supplied ivy pillar running down BOTH sides of the whole scroll. */
body::before,
body::after{
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  width:clamp(92px,10vw,180px);
  z-index:30;
  pointer-events:none;
  background-image:url('/assets/tiang.webp');
  background-size:100% auto;
  background-repeat:repeat-y;
  background-position:top center;
  opacity:.82;
  filter:brightness(.72) saturate(.78) drop-shadow(10px 0 14px rgba(0,0,0,.35));
}
body::before{left:0}
body::after{
  right:0;
  transform:scaleX(-1);
  filter:brightness(.72) saturate(.78) drop-shadow(-10px 0 14px rgba(0,0,0,.35));
}

/* Main content stays behind the architectural frame but above backgrounds. */
#main{position:relative;z-index:1}

/* The hero already has its own foreground pillar, so don't double-stack it. */
.heroPillar{display:none!important}

/* Repair the book scene: centered book only, no giant overlapping copy. */
.bookZone{
  position:relative;
  z-index:2;
  background:
    radial-gradient(circle at 50% 45%,rgba(208,177,105,.08),transparent 42%),
    #0b0e0b!important;
}
.bookSticky{
  overflow:visible!important;
  justify-content:center!important;
  align-items:center!important;
  padding:4vh clamp(115px,12vw,210px)!important;
}
.bookCopy{
  display:none!important;
}
.book{
  width:min(72vw,980px)!important;
  max-height:78vh!important;
  aspect-ratio:1.52/1!important;
  margin:0 auto!important;
  left:auto!important;
  right:auto!important;
  transform-origin:center center!important;
}
.book .page.bookSpread{
  width:100%!important;
  height:100%!important;
  overflow:hidden!important;
  border-radius:4px;
}
.book .cover{
  left:25%!important;
  width:50%!important;
  height:100%!important;
  transform-origin:left center!important;
}
.book .cover>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* Make the opened two-page spread feel like one coherent book. */
.bookSpread{
  grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr)!important;
}
.bookLeaf{
  overflow:hidden!important;
}
.printedImage img{
  max-height:48vh!important;
  object-fit:cover!important;
}
.rightLeaf h3{
  margin-top:12px!important;
}
.poem{
  font-size:clamp(11px,.92vw,15px)!important;
  line-height:1.55!important;
}

/* Keep gallery / content inside the pillar frame. */
.chapter,.journeyWrap,.token,footer{
  padding-left:max(7vw,120px)!important;
  padding-right:max(7vw,120px)!important;
}

@media(max-width:900px){
  body::before,body::after{
    width:72px;
    opacity:.62;
  }
  .bookSticky{padding-left:76px!important;padding-right:76px!important}
  .book{width:min(84vw,760px)!important}
  .chapter,.journeyWrap,.token,footer{
    padding-left:82px!important;
    padding-right:82px!important;
  }
}
@media(max-width:620px){
  body::before,body::after{
    width:42px;
    opacity:.48;
  }
  .bookSticky{padding-left:46px!important;padding-right:46px!important}
  .book{width:90vw!important;max-height:70vh!important}
  .chapter,.journeyWrap,.token,footer{
    padding-left:50px!important;
    padding-right:50px!important;
  }
}

/* v11 — rebuild the lore book interaction cleanly */

/* One controlled stage: no pages peeking out behind the closed cover. */
.book{
  width:min(70vw,960px)!important;
  height:min(76vh,660px)!important;
  aspect-ratio:auto!important;
  position:relative!important;
  perspective:2200px!important;
  transform-style:preserve-3d!important;
}

.book .page.bookSpread{
  position:absolute!important;
  inset:4% 0!important;
  width:100%!important;
  height:92%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)!important;
  opacity:0;
  visibility:hidden;
  transform:scale(.94);
  transition:opacity .28s ease,transform .35s ease;
  z-index:1!important;
  background:#cdb783!important;
  box-shadow:0 28px 70px rgba(0,0,0,.55),inset 0 0 28px rgba(75,48,20,.2);
  border:1px solid rgba(83,61,32,.85);
  border-radius:5px;
}

/* Closed book is a true portrait cover centered in the stage. */
.book .cover{
  position:absolute!important;
  top:0!important;
  bottom:0!important;
  left:50%!important;
  right:auto!important;
  width:auto!important;
  height:100%!important;
  aspect-ratio:2/3!important;
  transform:translateX(-50%) rotateY(0deg)!important;
  transform-origin:left center!important;
  z-index:5!important;
  backface-visibility:hidden!important;
  overflow:hidden!important;
  border-radius:4px;
  background:#0d0d0b!important;
  box-shadow:0 30px 70px rgba(0,0,0,.66)!important;
  transition:opacity .18s linear;
}
.book .cover>img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
}

/* Open spread styling */
.bookLeaf{
  min-width:0!important;
  height:100%!important;
  overflow:hidden!important;
  padding:5.5% 6%!important;
  box-sizing:border-box!important;
}
.leftLeaf{
  background:
    radial-gradient(circle at 62% 35%,rgba(255,247,218,.18),transparent 46%),
    linear-gradient(90deg,#baa06c,#d6c08c 18%,#d1b984 88%,#a98f60)!important;
}
.rightLeaf{
  background:
    radial-gradient(circle at 38% 35%,rgba(255,247,218,.18),transparent 46%),
    linear-gradient(90deg,#aa8f60,#d1b984 12%,#d6c08c 82%,#b99f6c)!important;
}
.bookGutter{
  height:100%!important;
  background:linear-gradient(90deg,#9b8056,#322519 48%,#997e53)!important;
  box-shadow:0 0 20px rgba(0,0,0,.48)!important;
}
.printedImage{
  height:73%!important;
  padding:7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#aa9162!important;
}
.printedImage img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
}
.caption{margin-top:10px!important}
.rightLeaf h3{
  margin:8px 0 7px!important;
  font-size:clamp(16px,1.5vw,24px)!important;
}
.ornament{margin:6px 0 11px!important}
.poem{
  font-size:clamp(11px,.9vw,14px)!important;
  line-height:1.48!important;
}
.bookSig{
  bottom:4%!important;
  font-size:10px!important;
}

/* JS toggles this class once the book is actually open. */
.book.is-open .page.bookSpread{
  opacity:1!important;
  visibility:visible!important;
  transform:scale(1)!important;
}
.book.is-open .cover{
  pointer-events:none;
}

@media(max-width:900px){
  .book{
    width:min(82vw,760px)!important;
    height:min(68vh,540px)!important;
  }
}
@media(max-width:620px){
  .book{
    width:88vw!important;
    height:min(60vh,470px)!important;
  }
  .bookLeaf{padding:4.5%!important}
  .rightLeaf h3{font-size:12px!important}
  .poem{font-size:9px!important;line-height:1.34!important}
  .bookSig{font-size:8px!important}
}

/* v12 — book section background + stable book layout */

/* Use the supplied gothic body image behind the entire lore-book sequence. */
.bookZone{
  position:relative!important;
  overflow:hidden!important;
  background:
    linear-gradient(rgba(7,10,7,.58),rgba(7,10,7,.72)),
    url('/assets/bg-body.webp') center center / cover no-repeat!important;
}
.bookZone::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 48%,rgba(214,184,105,.13),transparent 34%),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.46));
  pointer-events:none;
}
.bookSticky{
  position:sticky!important;
  top:0!important;
  height:100vh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  padding:4vh clamp(110px,11vw,190px)!important;
  z-index:2!important;
}

/* Remove the stray copy block completely from the book stage. */
.bookCopy{display:none!important}

/* Stable centered book stage. */
.book{
  width:min(68vw,900px)!important;
  height:min(72vh,630px)!important;
  position:relative!important;
  perspective:2200px!important;
  transform-style:preserve-3d!important;
  transform-origin:center!important;
  margin:0 auto!important;
}

/* Inner spread exists but remains invisible while the book is closed. */
.book .page.bookSpread{
  position:absolute!important;
  inset:3% 0!important;
  width:100%!important;
  height:94%!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)!important;
  padding:0!important;
  opacity:0!important;
  visibility:hidden!important;
  transform:scale(.96)!important;
  transition:opacity .28s ease,transform .35s ease!important;
  z-index:1!important;
  border-radius:5px;
  overflow:hidden!important;
  background:#cab27e!important;
  box-shadow:0 28px 65px rgba(0,0,0,.58);
}

/* Closed cover is portrait, centered, and shows the ENTIRE supplied artwork. */
.book .cover{
  position:absolute!important;
  top:0!important;
  left:50%!important;
  width:auto!important;
  height:100%!important;
  aspect-ratio:2/3!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%) rotateY(0deg)!important;
  transform-origin:left center!important;
  z-index:5!important;
  overflow:hidden!important;
  border-radius:4px;
  background:#090a08!important;
  box-shadow:0 32px 72px rgba(0,0,0,.68)!important;
  backface-visibility:hidden!important;
}
.book .cover>img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
}

/* Reveal only when JS says the cover is sufficiently open. */
.book.is-open .page.bookSpread{
  opacity:1!important;
  visibility:visible!important;
  transform:scale(1)!important;
}

/* Clean book pages */
.bookLeaf{
  height:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  padding:5% 6%!important;
  box-sizing:border-box!important;
  color:#2c2115!important;
  font-family:"IM Fell English",Georgia,serif!important;
}
.leftLeaf{
  background:
    radial-gradient(circle at 64% 36%,rgba(255,247,218,.18),transparent 46%),
    linear-gradient(90deg,#b59a67,#d5bf8a 17%,#ceb681 87%,#9f8659)!important;
}
.rightLeaf{
  background:
    radial-gradient(circle at 36% 36%,rgba(255,247,218,.18),transparent 46%),
    linear-gradient(90deg,#9f8659,#ceb681 13%,#d5bf8a 83%,#b59a67)!important;
}
.bookGutter{
  height:100%!important;
  background:linear-gradient(90deg,#94794f,#2f2216 48%,#94794f)!important;
  box-shadow:0 0 20px rgba(0,0,0,.5)!important;
}
.printedImage{
  height:72%!important;
  padding:7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:#a98e5d!important;
}
.printedImage img{
  width:100%!important;
  height:100%!important;
  max-height:none!important;
  object-fit:cover!important;
}
.caption{margin-top:10px!important}
.rightLeaf h3{margin:8px 0 7px!important;font-size:clamp(16px,1.45vw,23px)!important}
.ornament{margin:6px 0 10px!important}
.poem{font-size:clamp(11px,.9vw,14px)!important;line-height:1.45!important}
.bookSig{bottom:4%!important;font-size:10px!important}

@media(max-width:900px){
  .bookSticky{padding-left:78px!important;padding-right:78px!important}
  .book{width:min(82vw,760px)!important;height:min(66vh,540px)!important}
}
@media(max-width:620px){
  .bookSticky{padding-left:48px!important;padding-right:48px!important}
  .book{width:88vw!important;height:min(58vh,455px)!important}
  .poem{font-size:9px!important;line-height:1.32!important}
  .rightLeaf h3{font-size:12px!important}
}

/* v13 — shorter interactive book section */
.bookZone{
  height:220vh!important;
  position:relative!important;
  overflow:visible!important;
  background:
    linear-gradient(rgba(6,9,6,.42),rgba(6,9,6,.58)),
    url('/assets/bg-body.webp') center center / cover no-repeat!important;
}
.bookSticky{
  position:sticky!important;
  top:0!important;
  height:100vh!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  padding:4vh max(110px,10vw)!important;
  z-index:2!important;
}
.bookCopy,.book{display:none!important}

.scrollBook{
  position:relative!important;
  width:min(68vw,920px)!important;
  height:min(70vh,610px)!important;
  perspective:2400px!important;
  transform-style:preserve-3d!important;
  transform-origin:center center!important;
  will-change:transform;
}

.bookInside{
  position:absolute!important;
  inset:4% 0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)!important;
  opacity:0;
  transform:scale(.95);
  z-index:1!important;
  overflow:hidden!important;
  border-radius:6px;
  background:#ccb47e!important;
  box-shadow:0 30px 70px rgba(0,0,0,.58)!important;
  will-change:opacity,transform;
}

.frontCover{
  position:absolute!important;
  top:0!important;
  left:50%!important;
  height:100%!important;
  width:auto!important;
  aspect-ratio:2/3!important;
  transform:translateX(-50%) rotateY(0deg);
  transform-origin:left center!important;
  transform-style:preserve-3d!important;
  backface-visibility:hidden!important;
  z-index:5!important;
  border-radius:5px;
  overflow:hidden!important;
  box-shadow:0 32px 76px rgba(0,0,0,.68)!important;
  will-change:transform,opacity;
}
.frontCover img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
}

.bookPage{
  position:relative!important;
  min-width:0!important;
  height:100%!important;
  padding:5% 6%!important;
  box-sizing:border-box!important;
  color:#2d2115!important;
  font-family:"IM Fell English",Georgia,serif!important;
}
.leftPage{
  background:
    radial-gradient(circle at 65% 36%,rgba(255,248,220,.18),transparent 46%),
    linear-gradient(90deg,#b39864,#d7c18d 17%,#cfb781 87%,#9e8557)!important;
}
.rightPage{
  background:
    radial-gradient(circle at 35% 36%,rgba(255,248,220,.18),transparent 46%),
    linear-gradient(90deg,#9e8557,#cfb781 13%,#d7c18d 83%,#b39864)!important;
}
.bookSpine{
  background:linear-gradient(90deg,#8f754c,#2d2116 48%,#8f754c)!important;
  box-shadow:0 0 20px rgba(0,0,0,.52)!important;
}
.pageNumber{
  text-align:center!important;
  font-size:10px!important;
  letter-spacing:.2em!important;
  opacity:.58!important;
  margin-bottom:10px!important;
}
.printedImage{
  height:72%!important;
  padding:7px!important;
  background:#a88e5d!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid rgba(64,43,22,.45)!important;
}
.printedImage img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
}
.caption{
  text-align:center!important;
  margin-top:10px!important;
  font-size:10px!important;
  letter-spacing:.2em!important;
}
.rightPage h3{
  text-align:center!important;
  font-family:"Cinzel",Georgia,serif!important;
  font-size:clamp(15px,1.4vw,22px)!important;
  line-height:1.16!important;
  letter-spacing:.07em!important;
  margin:8px 0 6px!important;
}
.ornament{text-align:center!important;margin:6px 0 10px!important}
.poem{
  text-align:center!important;
  font-size:clamp(10px,.86vw,13px)!important;
  line-height:1.42!important;
  margin:0!important;
  font-style:italic!important;
}
.bookSig{
  position:absolute!important;
  left:0!important;right:0!important;bottom:4%!important;
  text-align:center!important;
  font-size:9px!important;
  opacity:.7!important;
}

@media(max-width:900px){
  .bookZone{height:210vh!important}
  .bookSticky{padding-left:78px!important;padding-right:78px!important}
  .scrollBook{width:min(82vw,740px)!important;height:min(64vh,520px)!important}
}
@media(max-width:620px){
  .bookZone{height:200vh!important}
  .bookSticky{padding-left:46px!important;padding-right:46px!important}
  .scrollBook{width:88vw!important;height:min(56vh,440px)!important}
  .poem{font-size:8.5px!important;line-height:1.3!important}
  .rightPage h3{font-size:11px!important}
}

/* v14 — medieval/fantasy display typography across main UI */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=IM+Fell+English:ital@0;1&display=swap');

:root{
  --display-font:"Uncial Antiqua","IM Fell English",Georgia,serif;
}

/* Main display text uses the DIH-like medieval serif look */
.heroText h1,
.chapter h2,
.token h2,
.memeLabIntro h2,
footer h2,
.bookPage h3,
.rightPage h3,
.relic h3,
.featuredHead,
.nav b,
.gothicText h1{
  font-family:var(--display-font)!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
}

/* Keep body/poem copy readable */
body,
.poem,
.bookSig,
.memeLabIntro p,
.relic p,
.token p,
.submitNote{
  font-family:"IM Fell English",Georgia,serif;
}

/* meme lab */
.memeLab{
  position:relative;
  padding:11vw max(7vw,120px);
  background:
    radial-gradient(circle at 75% 18%,rgba(243,90,170,.10),transparent 28%),
    linear-gradient(180deg,#0b0e0b,#080a08 70%);
  border-top:1px solid rgba(213,184,104,.12);
  z-index:2;
}
.memeLabIntro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4vw;
  align-items:end;
  margin-bottom:5vw;
}
.memeLabIntro small{color:var(--gold);letter-spacing:.26em;font-size:9px}
.memeLabIntro h2{
  grid-column:1;
  font-size:clamp(70px,9vw,145px)!important;
  line-height:.88!important;
  color:#d8c69a;
  margin:15px 0 0;
  text-shadow:0 4px 0 #453b28;
}
.memeLabIntro p{
  grid-column:2;
  max-width:500px;
  line-height:1.9;
  opacity:.62;
  margin:0 0 12px;
}
.memeLabIntro a{color:#e8b0cf;text-decoration:none}

.memeMaker{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:28px;
  align-items:start;
}
.memeCanvasWrap{
  position:relative;
  background:#050605;
  border:1px solid rgba(213,184,104,.18);
  box-shadow:0 28px 70px rgba(0,0,0,.45);
}
#memeCanvas{width:100%;height:auto;display:block;aspect-ratio:1/1}
.memeHint{
  position:absolute;left:14px;bottom:12px;
  font-size:7px;letter-spacing:.22em;color:#ddc99a99
}
.memeControls{
  border:1px solid rgba(213,184,104,.14);
  background:rgba(13,15,12,.72);
  padding:24px;
  backdrop-filter:blur(10px);
}
.controlGroup{margin-bottom:18px}
.controlGroup>label{
  display:block;
  font-size:8px;
  letter-spacing:.22em;
  color:#cdb77c;
  margin-bottom:8px;
}
.controlGroup input[type="text"],
.controlGroup input:not([type]),
.controlGroup select,
.controlGroup input[type="file"]{
  width:100%;
  background:#080a08;
  color:#eadcae;
  border:1px solid rgba(213,184,104,.18);
  padding:12px 13px;
  font-family:"IM Fell English",Georgia,serif;
  outline:none;
}
.checkRow{display:flex;gap:24px;flex-wrap:wrap}
.checkRow label{display:flex;align-items:center;gap:8px;margin:0!important}
.checkRow input{accent-color:#e9a6ca}
.memeButtons{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.memeButtons button,.memeButtons a{
  border:1px solid rgba(213,184,104,.25);
  background:#11120f;
  color:#e8d5a3;
  min-height:48px;
  padding:13px;
  font-family:var(--display-font);
  font-size:10px;
  letter-spacing:.08em;
  text-decoration:none;
  display:grid;place-items:center;
  cursor:pointer;
}
.memeButtons button:hover,.memeButtons a:hover{background:#1b1a13;border-color:#d5b868}
#downloadMeme{background:#d7c18c;color:#1d180f}
#shareMeme{grid-column:1/-1}
.submitNote{font-size:10px;line-height:1.65;opacity:.5;margin:18px 0 0}
.featuredMemes{margin-top:7vw}
.featuredHead{display:flex;justify-content:space-between;gap:20px;margin-bottom:15px;font-size:12px;color:#cdb77c}
.featuredHead small{opacity:.45;font-family:"IM Fell English",Georgia,serif}
.featuredGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.featuredGrid article{
  aspect-ratio:1/1;
  border:1px dashed rgba(213,184,104,.18);
  background:linear-gradient(145deg,#10120f,#080908);
  display:grid;place-items:center;
  position:relative;
  overflow:hidden;
}
.featureGhost{
  position:absolute;
  font-family:var(--display-font);
  font-size:8vw;
  opacity:.035;
}
.featuredGrid p{font-size:8px;letter-spacing:.2em;opacity:.35}

@media(max-width:900px){
  .memeLab{padding-left:82px;padding-right:82px}
  .memeMaker{grid-template-columns:1fr}
  .memeLabIntro{grid-template-columns:1fr}
  .memeLabIntro h2,.memeLabIntro p{grid-column:1}
  .featuredGrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:620px){
  .memeLab{padding-left:50px;padding-right:50px}
  .memeLabIntro h2{font-size:18vw!important}
  .memeButtons{grid-template-columns:1fr}
  #shareMeme{grid-column:auto}
}

/* v15 — stronger medieval typography + medieval hero quick-actions */
@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Pirata+One&family=IM+Fell+English:ital@0;1&display=swap');

:root{
  --display-font:"MedievalSharp","Pirata One","IM Fell English",Georgia,serif;
  --medieval-gold:#d7b35f;
  --medieval-dark:#17140d;
  --medieval-edge:#70552a;
}

/* Push all important display typography further into the hand-carved medieval look. */
.heroText h1,
.gothicText h1,
.chapter h2,
.token h2,
.memeLabIntro h2,
footer h2,
.bookPage h3,
.rightPage h3,
.relic h3,
.featuredHead,
.nav b{
  font-family:var(--display-font)!important;
  font-weight:400!important;
  letter-spacing:.025em!important;
  text-transform:uppercase;
}

/* Smaller UI labels and buttons also inherit the medieval feel. */
.heroText small,
.chapterNo,
.token small,
.memeLabIntro small,
.featuredHead small,
.memeButtons button,
.memeButtons a,
.diamondBtn em,
.buyNote{
  font-family:"MedievalSharp","IM Fell English",Georgia,serif!important;
}

/* Hero title becomes more carved / relic-like. */
.gothicText h1{
  color:#d7b35f!important;
  text-shadow:
    0 2px 0 #8e672d,
    0 5px 0 #4c3519,
    0 10px 18px rgba(0,0,0,.62),
    0 0 22px rgba(215,179,95,.10)!important;
}

/* Replace modern diamonds with medieval iron/stone plaques. */
.heroActions{
  gap:16px!important;
  align-items:center!important;
  margin-top:28px!important;
}

.diamondBtn{
  width:72px!important;
  height:62px!important;
  transform:none!important;
  border-radius:2px!important;
  clip-path:polygon(12% 0,88% 0,100% 20%,100% 80%,88% 100%,12% 100%,0 80%,0 20%)!important;
  background:
    linear-gradient(180deg,rgba(63,53,32,.97),rgba(23,20,13,.97))!important;
  border:1px solid #8d6d36!important;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,233,171,.12),
    0 8px 18px rgba(0,0,0,.42)!important;
  color:#dfc57e!important;
  position:relative!important;
  overflow:visible!important;
}

.diamondBtn::before,
.diamondBtn::after{
  content:"";
  position:absolute;
  width:7px;height:7px;
  border-radius:50%;
  background:#9b7a3c;
  box-shadow:inset 0 1px 2px #e2c983,0 1px 2px #000;
  top:7px;
}
.diamondBtn::before{left:8px}
.diamondBtn::after{right:8px}

.diamondBtn span{
  transform:none!important;
  font-family:"MedievalSharp","Pirata One",Georgia,serif!important;
  font-size:25px!important;
  line-height:1!important;
  text-shadow:0 2px 0 #2d2112!important;
}

.diamondBtn em{
  top:70px!important;
  transform:translateX(-50%)!important;
  font-size:8px!important;
  color:#d7c18d!important;
  opacity:.72!important;
}

.diamondBtn:hover{
  transform:translateY(-3px)!important;
  background:
    linear-gradient(180deg,rgba(91,71,38,.98),rgba(31,25,15,.98))!important;
  border-color:#d2ad59!important;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.25),
    0 12px 24px rgba(0,0,0,.48),
    0 0 18px rgba(215,179,95,.10)!important;
}

.disabledBuy{
  opacity:.5!important;
  filter:grayscale(.2);
}

/* Make the top X link look like part of the same medieval UI. */
.navRight a{
  font-family:"MedievalSharp","IM Fell English",Georgia,serif!important;
  color:#dcc180!important;
  padding:7px 11px!important;
  border:1px solid rgba(140,108,54,.48)!important;
  background:rgba(20,17,11,.58)!important;
  clip-path:polygon(8% 0,92% 0,100% 22%,100% 78%,92% 100%,8% 100%,0 78%,0 22%)!important;
  text-shadow:0 1px 2px #000!important;
}
.navRight a:hover{
  background:rgba(48,38,21,.82)!important;
  border-color:#c8a353!important;
}

/* Medieval treatment for meme lab controls */
.memeButtons button,
.memeButtons a{
  clip-path:polygon(5% 0,95% 0,100% 20%,100% 80%,95% 100%,5% 100%,0 80%,0 20%)!important;
  background:linear-gradient(180deg,#2a2418,#12100b)!important;
  border-color:#7f6232!important;
  color:#dfc784!important;
  text-shadow:0 1px 2px #000!important;
}
#downloadMeme{
  background:linear-gradient(180deg,#c8aa63,#9b7739)!important;
  color:#1a140b!important;
  text-shadow:none!important;
}

/* Keep prose readable, not blackletter-heavy. */
body,
.poem,
.bookSig,
.memeLabIntro p,
.relic p,
.token p,
.submitNote{
  font-family:"IM Fell English",Georgia,serif!important;
}

@media(max-width:620px){
  .diamondBtn{width:60px!important;height:54px!important}
  .diamondBtn em{top:61px!important;font-size:7px!important}
  .diamondBtn span{font-size:21px!important}
}

/* v16 — launch config UI */
.launchInfo{
  margin-top:36px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
.launchInfo .buyNote{
  margin-top:0!important;
}
.contractPill{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid #7f6232;
  color:#dfc784;
  background:linear-gradient(180deg,#292217,#12100b);
  clip-path:polygon(5% 0,95% 0,100% 22%,100% 78%,95% 100%,5% 100%,0 78%,0 22%);
  font-family:"MedievalSharp","IM Fell English",Georgia,serif;
  cursor:pointer;
}
.contractPill:disabled{opacity:.45;cursor:not-allowed}
.contractPill span{font-size:7px;letter-spacing:.18em;opacity:.65}
.contractPill strong{font-size:10px;font-weight:400}
.contractPill em{font-style:normal;font-size:7px;letter-spacing:.13em;color:#e8b0cf}