/* Grimm's recurring materials and symbols. Text keeps the original requested fonts. */
:root{--ink:#303d35;--paper:#bdbca9;--forest:#223a32;--old-brass:#999778;--red:#74392f;--ivory:#dddac2}
.scene{object-position:center center;background:#172723;object-fit:cover}
.scene,.scene.active{transform:none;animation:none;will-change:opacity}
.vignette{background:radial-gradient(ellipse at 46% 43%,transparent 30%,#040e0e30 70%,#030b0bd0 100%),linear-gradient(#02101155,transparent 37%,transparent 65%,#030b09e6)}
#rain-glass{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;opacity:.85}
.home-foliage{position:absolute;inset:13px;pointer-events:none;z-index:5;opacity:.65}
.home-foliage:before,.home-foliage:after{content:'';position:absolute;left:0;top:0;width:210px;height:210px;background:url('assets/thorn-corner.svg') left top/contain no-repeat;filter:drop-shadow(1px 2px 1px #000b)}
.home-foliage:after{left:auto;top:auto;right:0;bottom:0;transform:rotate(180deg);width:150px;height:150px;opacity:.5}
.home-title{top:4.3%;width:min(34vw,470px)}
.utility-menu:before{content:'';position:absolute;top:-26px;bottom:-26px;width:100%;pointer-events:none;background:url('assets/thorn-corner.svg') top center/100% auto no-repeat;opacity:.45;z-index:-1}
.utility img{filter:drop-shadow(0 3px 5px #000b);opacity:.94}
.utility small{color:#d3d1b6;opacity:.8}
.begin{padding:16px 32px}
.begin .ornament{width:150px;height:27px;margin:0 auto 10px;background:url('assets/moon-divider.svg') center/contain no-repeat}
.begin .ornament:after{display:none}
.begin>span:not(.ornament){font-size:clamp(16px,1.55vw,21px);letter-spacing:5px;text-shadow:0 2px 14px #000,0 0 25px #000}
.begin small{font-size:10px;letter-spacing:1px;margin-top:10px;color:#d2cbb0;text-shadow:0 2px 7px #000}
.chapter-backdrop{background:linear-gradient(#071817df,#0d1814f2),url('assets/scene-castle.webp') center/cover}

/* Preserve the open book, page layout and navigation; change its material and margin art. */
.book{background:#26352c;box-shadow:0 0 0 3px #101d19,0 0 0 6px #445044,0 7px 0 8px #111a17}
.book-page{background-color:#bdbca9;background-image:url('assets/paper-weathered.webp');color:var(--ink)}
.book-page:before{content:'';position:absolute;left:7px;top:6px;width:105px;height:115px;background:url('assets/ornament-leaf-corner.png') left top/contain no-repeat;transform:rotate(90deg);opacity:.34;pointer-events:none}
.contents-page:before{left:auto;top:auto;right:0;bottom:0;transform:rotate(180deg);width:110px;height:110px;opacity:.3}
.illustration-page{box-shadow:inset 1px 2px 9px #24312644,inset -23px 0 30px -17px #17271c88}
.contents-page{box-shadow:inset -3px 0 8px #24312644,inset 22px 0 35px -22px #17271c9c}
.page-running{color:#4b5a4c;border-color:#44514344;position:relative;z-index:1}
.illustration-frame{background:#132822;border-color:#52634d;outline-color:#58634c55;padding:4px;box-shadow:0 4px 8px #15231d35}
.illustration-frame img{object-fit:cover;object-position:50% 53%;filter:none}
.illustration-frame img[src$="chapter-bremen.webp"]{object-position:50% 0%}
.illustration-frame img[src$="chapter-snow.webp"]{object-position:60% 50%}
.illustration-frame img[src$="chapter-rapunzel.webp"]{object-position:50% 38%}
.illustration-frame:before,.illustration-frame:after{background:#a7ae8eaa;box-shadow:0 1px 3px #1d2c2455}
.story-caption h1{color:#263c32}.story-caption>small{color:#724b3c}
.story-caption #chapter-description-en{color:#4b5a4b}
.fine-rule{height:22px;width:150px;margin:7px auto;background:url('assets/ornament-flourish.png') center/contain no-repeat;opacity:.65}
.chapter-list-item{color:#425342;border-color:#48563f36}
.chapter-list-item .chapter-label{color:#626c53}
.chapter-list-item.active{color:#713a30;background:linear-gradient(90deg,#7d3c3021,transparent)}
.chapter-list-item.active:before{background:#74392f}.chapter-list-item:hover{color:#74392f;background:#293f3010}
.contents-page>h2{color:#263c32}.contents-subtitle{color:#55634f}
.chapter-action>p{color:#62694f}.page-number{color:#5b684f}
.book-spine{background:linear-gradient(90deg,transparent,#25372926 27%,#101d156a 49%,#dce0bb44 64%,transparent)}
.chapter-action{flex-wrap:wrap}.chapter-action .ink-button{margin-left:auto;white-space:nowrap}

/* Letters use a dark forest binding, cool aged linen, and deliberate empty reading areas. */
dialog{width:min(970px,91vw);max-height:91dvh;filter:drop-shadow(0 20px 34px #000a)}
dialog::backdrop{background:#030b0bec;backdrop-filter:blur(5px)}
.letter-paper{isolation:isolate;padding:0 49px 28px 121px;background:#bdbca9 url('assets/paper-weathered.webp') center/100% 100%;border-color:#67725a;border-radius:1px 5px 3px 1px;box-shadow:inset 0 0 28px #1c322725,0 0 0 5px #1e2c23;max-height:88dvh;scrollbar-color:#58654c #adb29c}
.letter-paper:before{inset:14px 15px 14px 96px;border-color:#49594135;border-top:0;border-bottom:0;z-index:-1}
.letter-paper:after{content:'';position:absolute;width:165px;height:160px;right:6px;bottom:12px;background:url('assets/thorn-corner.svg') center/contain no-repeat;transform:rotate(180deg);opacity:.25;pointer-events:none;z-index:-1}
.letter-forest{position:absolute;top:0;bottom:0;left:0;width:78px;min-height:100%;background:linear-gradient(90deg,#0b1c18,#23372e 60%,#16251f);border-right:2px solid #69735a;box-shadow:inset -6px 0 12px #0006;overflow:hidden;pointer-events:none;z-index:-1}
.letter-forest:before,.letter-forest:after{content:'';position:absolute;inset:100px -18px auto -4px;height:300px;background:url('assets/thorn-corner.svg') 50% 0/190px auto no-repeat;opacity:.95;transform:rotate(-9deg)}
.letter-forest:after{inset:auto -32px -3px -7px;height:200px;transform:rotate(180deg);opacity:.55}
.forest-moon{position:absolute;left:28px;top:31px;width:26px;height:26px;border-radius:50%;box-shadow:-7px 3px 0 -1px #a5a17a;transform:rotate(-22deg)}
.letter-header{margin:0 -49px 28px -42px;padding:26px 74px 23px 42px;min-height:112px;justify-content:flex-start;gap:20px;position:relative;background:linear-gradient(95deg,#21372f,#132a25);border-bottom:1px solid #879176;color:#e0dfc6;box-shadow:0 4px 15px #19302633}
.letter-header:after{content:'';position:absolute;bottom:-10px;left:36px;width:250px;height:28px;background:url('assets/ornament-flourish-light.png') center/contain no-repeat;opacity:.8}
.letter-header img{width:54px;height:63px;filter:drop-shadow(0 3px 4px #0008)}
.letter-header h2{font-size:29px;letter-spacing:4px}.letter-header p{font-size:11px;letter-spacing:.7px;color:#b6c2a5;margin-top:10px}
.close-letter{color:#b4bca4;top:25px;right:22px}.close-letter:hover{color:#eee8ca}
.letter-body{position:relative;grid-template-columns:1.13fr 1fr;gap:30px;color:#2b3c33;z-index:1}
.letter-column{font-size:17px;line-height:1.95;letter-spacing:1px}.letter-column p{margin-bottom:15px}
.letter-column .salutation{font-size:19px;color:#6b3b30;margin-bottom:18px}
.letter-column[lang=en]{border-color:#4356423b;padding-left:26px;font-size:12px;color:#4b5949;line-height:1.95;letter-spacing:.03px}
.letter-column[lang=en] .salutation{font-size:14px;color:#6b3b30}
.letter-footer{z-index:1;color:#4d5c4a;border-color:#42533f47;margin-top:19px;padding-top:21px;min-height:66px;padding-right:88px}
.letter-footer:before{content:'';position:absolute;left:0;top:-10px;width:100px;height:17px;background:url('assets/ornament-flourish.png') left center/contain no-repeat;opacity:.45}
#letter-seal{position:absolute;right:-3px;top:-1px;width:73px;height:73px;object-fit:contain;transform:rotate(-12deg);filter:drop-shadow(1px 4px 2px #11231c55)}
.guide-content .control-row{border-color:#485b442b;padding:12px 4px;gap:29px}
.key-group kbd{border:1px solid #6b775f;background:#c3c7ad66;box-shadow:0 2px 0 #728066;color:#2d4938}
.control-row small,.guide-note [lang=en],.credits-content [lang=en],.chapter-letter [lang=en]{color:#52624c}
.guide-note{font-size:16px;padding-top:22px}
.credits-content{padding:12px 0 16px}
.credits-content .credit-role{font-size:18px!important;letter-spacing:2px;line-height:1.8;color:#354c3d}
.credits-content h3{font-size:32px!important;letter-spacing:1px;margin:14px 0 9px;color:#6f3d32}
.credits-content h3[lang=en]{color:#6f3d32}
.credits-content .fine-rule{width:210px;height:27px;margin:23px auto}
.credits-content .credits-acknowledgement{font-size:17px!important;line-height:2!important;letter-spacing:1px!important;color:#354c3d}
.credits-content .credits-translation{margin:15px auto 0;line-height:1.9}
dialog[data-kind=team] .letter-header:after{left:80px;width:340px}
dialog[data-kind=team] .letter-paper:after{width:235px;height:210px;opacity:.35}
dialog[data-kind=notice] .letter-forest:before{transform:rotate(4deg);height:400px;background-size:230px auto}
.chapter-letter{padding-bottom:15px}

@media(max-height:760px) and (min-width:801px){
 .letter-header{min-height:93px;padding-top:16px;padding-bottom:17px;margin-bottom:23px}
 .letter-header h2{font-size:26px}.letter-header img{height:54px;width:48px}
 .letter-column{font-size:15px;line-height:1.85}.letter-column[lang=en]{font-size:11px;line-height:1.9}
 .letter-column .salutation{font-size:17px;margin-bottom:13px}.letter-column p{margin-bottom:12px}
 .guide-content .control-row{padding:9px 4px}.guide-note{padding-top:16px}
 .letter-footer{margin-top:13px;min-height:60px}.letter-paper{padding-bottom:22px}
 .story-caption .fine-rule{margin:5px auto;height:18px}
 .credits-content>img{width:61px;margin-bottom:7px}.credits-content>p:not([lang=en]){font-size:21px;line-height:1.6}
 .credits-content h3{font-size:24px;margin-top:5px}.credits-content [lang=en]{font-size:11px;line-height:1.7}
 .credits-content .credits-note{margin-top:15px;font-size:14px!important}
}
@media(max-width:1000px) and (min-width:801px){
 .letter-paper{padding-left:105px;padding-right:32px}.letter-header{margin-left:-26px;margin-right:-32px;padding-left:26px}
 .letter-body{gap:22px}.letter-column[lang=en]{padding-left:18px}
 .chapter-list-item{gap:8px}.chapter-list-item .story-title{letter-spacing:1px}
}
@media(max-width:800px){
 .home-title{top:8%;width:min(65vw,420px)}.home-foliage:before{width:125px;height:125px}.home-foliage:after{width:100px;height:100px}
 .utility-menu:before{opacity:.28}.begin .ornament{width:132px;height:24px}
 .begin>span:not(.ornament){font-size:17px;letter-spacing:3px}.begin small{font-size:9px;letter-spacing:.4px}
 .book-page:before{width:100px;height:105px}.illustration-frame{height:235px;width:85%}.illustration-frame img{object-fit:cover}
 .letter-paper{padding:0 23px 25px 43px;max-height:86dvh}.letter-forest{width:22px;border-width:1px}.forest-moon{display:none}
 .letter-forest:before{left:-49px;background-size:160px}.letter-paper:before{left:31px;right:10px}
 .letter-header{margin:0 -23px 24px -20px;padding:22px 43px 22px 20px;gap:12px;min-height:98px}
 .letter-header h2{font-size:22px;letter-spacing:2px}.letter-header img{width:37px;height:46px}.letter-header p{font-size:9px;letter-spacing:.1px;line-height:1.6}
 .letter-header:after{left:15px;width:180px}.close-letter{right:11px;top:18px}
 .letter-body{grid-template-columns:1fr;gap:14px}.letter-column{font-size:16px}.letter-column .salutation{font-size:18px}
 .letter-column[lang=en]{padding-left:0;font-size:12px;border-left:0;border-top:1px solid #4356423b;padding-top:20px}
 .letter-footer{padding-right:70px}.letter-footer [lang=en]{font-size:9px}
 #letter-seal{width:65px;height:65px;right:-9px;top:9px}
 .guide-content .control-row{gap:13px;padding:15px 0}.control-row small{font-size:11px}
 .guide-note{font-size:15px}.guide-note [lang=en]{font-size:11px}
 .credits-content>p:not([lang=en]){font-size:19px}.credits-content [lang=en]{font-size:11px}
 .credits-content .credit-role{font-size:15px!important}.credits-content h3{font-size:25px!important}
 .credits-content .credits-acknowledgement{font-size:15px!important}.credits-content br{display:none}
 dialog[data-kind=team] .letter-header:after{left:12px;width:225px}
}
@media(prefers-reduced-motion:reduce){.home-foliage{opacity:.5}#rain-glass{opacity:.45}}