/* Visual finishing layer. Kept separate from story and artwork updates. */
:root{--orange:#d6502d;--yellow:#f1c55c;--green:#244c42;--muted:#596c62;--line:#d8d9c9}
body{background-image:radial-gradient(#52644d0a .65px,transparent .65px);background-size:5px 5px}
.header{border-bottom:1px solid #d8d9c975}
.brand-symbol{transition:transform .25s}.brand:hover .brand-symbol{transform:rotate(8deg)}
.header-continue{background:#fffaf0;box-shadow:0 3px 0 #203d3a08;transition:background .2s,border-color .2s}
.header-continue:hover{background:#f4dfaa;border-color:#d4ba7c}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em:after{content:'';position:absolute;left:2px;right:6%;bottom:-9px;height:7px;border-top:3px solid var(--orange);border-radius:50%;transform:rotate(-2deg);opacity:.5}
.hero .tiny-note{margin-top:6px;color:#52655b}
.hero-stamp{border-radius:2px;padding:18px 26px;border-top:1px dashed #a67b2b;border-bottom:1px dashed #a67b2b;box-shadow:3px 7px 0 #193c3220}
.hero-stamp:before,.hero-stamp:after{content:'';position:absolute;top:45%;width:12px;height:16px;background:var(--paper);border-radius:50%}.hero-stamp:before{left:-7px}.hero-stamp:after{right:-7px}
.coordinates{background:#e9eddf;border-color:#cdd6c2;color:#375648}
.section-head .eyebrow,.page-hero>.eyebrow{color:#537365}
.mission-grid{gap:20px}.mission{border-radius:7px;padding:28px;min-height:222px;box-shadow:0 4px 0 #203d3a0a;transition:transform .2s,box-shadow .2s}
.mission:hover{transform:translateY(-5px);box-shadow:0 9px 0 #203d3a0c}
.mission.primary{background:#244c42;background-image:radial-gradient(circle at 100% 0,transparent 64px,#d4e4cc18 65px,transparent 66px),radial-gradient(circle at 100% 0,transparent 100px,#d4e4cc18 101px,transparent 102px)}
.mission:nth-child(2){background:#f1cd72;border-color:#e4bb59;color:#324c3f}
.mission:nth-child(3){background:#dce9eb;border-color:#bed2d5;color:#264d56}
.mission:not(.primary) p{color:#475e54}.mission-mark{font-size:65px;top:14px;right:16px;opacity:.16;transform:rotate(-12deg)}
.mission .number{position:relative;font-size:9px;letter-spacing:1.3px}.mission h3{position:relative;max-width:245px;margin-top:22px}.mission .arrow{width:31px;height:31px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:18px;bottom:20px;opacity:.8}
.person{position:relative;background:#f2e4c7;border:1px solid #d9caaa;box-shadow:0 4px 0 #3145370b;border-radius:5px;transition:transform .2s,box-shadow .2s}
.person:nth-child(2){background:#e1eaeb;border-color:#c6d7da}.person:nth-child(3){background:#e3e9d4;border-color:#cad2b7}
.person:hover{box-shadow:0 10px 0 #3145370b}
.person-info{position:relative;padding:23px}.person-info:before{content:'';position:absolute;top:0;left:23px;width:36px;height:4px;background:#cd653a}.person:nth-child(2) .person-info:before{background:#5c8996}.person:nth-child(3) .person-info:before{background:#7b914d}
.person-art .badge{background:#fffaebed;box-shadow:0 2px 6px #203d3a17;border:1px solid #fff8;transform:rotate(-3deg)}
.person-info .bottom{padding-top:15px;border-top:1px dashed #344c3e33}.person-info p{color:#4b6259}
.quote-strip{position:relative;background:#efeadb;border:0;border-radius:5px;padding:49px 7% 35px;margin-top:30px}
.quote-strip:before{content:'“';position:absolute;top:-24px;left:calc(50% - 22px);font-family:Georgia,serif;font-size:100px;color:var(--orange);line-height:1}
.quote-strip blockquote{font-size:25px;max-width:800px;margin:0 auto 16px}.quote-strip>span{color:#596c62}
.page-hero{position:relative;padding:50px 0 34px;isolation:isolate}.page-hero:after{content:'✦';position:absolute;right:4%;top:19px;font-size:190px;line-height:1;color:#e9c46938;z-index:-1;transform:rotate(12deg);pointer-events:none}
.page-hero h1{max-width:950px}.intro{font-size:14px;max-width:650px}
.chapter-grid{gap:20px}.chapter-card{border-radius:6px;box-shadow:0 4px 0 #203d3a08;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.chapter-card:hover{transform:translateY(-4px);box-shadow:0 8px 0 #203d3a0b}
.chapter-cover{background:#dce5ce;background-image:radial-gradient(circle at center,transparent 45px,#f7f4eb80 46px,transparent 47px),radial-gradient(circle at center,transparent 65px,#f7f4eb80 66px,transparent 67px)}
.chapter-card:nth-child(3n+2) .chapter-cover{background-color:#f0cc80}.chapter-card:nth-child(3n) .chapter-cover{background-color:#c9dee0}
.chapter-cover .chapter-symbol{font-family:Georgia,serif;font-size:67px;color:#35594b;filter:none;text-shadow:2px 3px 0 #fff6}.chapter-cover .ch-no{font-weight:600;font-size:9px}
.chapter-details{display:flex;flex:1;flex-direction:column}.chapter-details h2{line-height:1.3;min-height:2.6em}.chapter-details p{margin-top:0}.chapter-details button{align-self:flex-start;margin-top:auto}.chapter-details .illustrated-label{font-size:8px;letter-spacing:.6px}
.book-progress{background:#e8ecde;border-radius:5px;padding:13px 17px;width:fit-content;flex-wrap:wrap}.book-progress progress{border-radius:9px;overflow:hidden}
.album-link{border-bottom:1px dashed #b7bda9;padding-bottom:12px}
.map-board{box-shadow:inset 0 0 0 7px #f7f4eb80,0 5px 0 #203d3a0a}.map-tag{z-index:1;background:#fff9eae8;padding:8px 10px;border-radius:3px}.map-detail{background:#f3dfaa;border-color:#dfc791;border-radius:5px;box-shadow:3px 5px 0 #203d3a0a}.map-detail h2{margin-top:23px}.map-detail p{color:#4f6253}
.watch-panel{background:#dce5d4;background-image:radial-gradient(#77916e26 1px,transparent 1px);background-size:17px 17px;border:1px solid #c6d3bb;border-radius:7px}.watch-panel>.eyebrow{background:#dce5d4;width:fit-content;padding:4px 8px}
.lab-notebook{border-radius:5px;box-shadow:5px 5px 0 #203d3a09;border-left:5px solid #e4b35b}.lab-notebook .note-lines{padding-left:17px;border-left:1px solid #d9776344}.game{background:#fcf9ef;border-radius:5px}.game:nth-child(2){background:#edf0e3}.answer-row button{background:#fffaf0;transition:background .2s,transform .2s}.answer-row button:hover{background:#f2d58d;transform:translateY(-2px)}
.collection{border-radius:5px;position:relative;overflow:hidden}.collection:after{content:'✦';position:absolute;right:100px;top:-33px;font-size:170px;color:#d6e4bc0b;pointer-events:none}
.secret-call{border-left:5px solid var(--yellow);border-radius:5px}.album-chapter{padding:26px 0}.album-chapter[open] summary strong{color:var(--orange)}
#passport{border-radius:6px;box-shadow:0 20px 80px #102e3440}.passport-text{background-image:linear-gradient(90deg,transparent 96%,#d8d1ba55 96%);border-left:1px dashed #b9bda8}
.reader-layout aside button{border-radius:0 5px 5px 0;transition:background .2s}.reader-layout aside button:hover{background:#7e947014}.reader-layout aside button.selected{background:#c47c2210;font-weight:600}
#reader-content h1{padding-bottom:25px;border-bottom:1px solid var(--line)}
#reader-content>p:first-of-type:first-letter{font-size:2.6em;line-height:1;color:var(--orange);font-weight:500}
footer{background:#e9eddf;border-top-color:#cdd6c2}footer .footer-brand{letter-spacing:.5px}
@media(max-width:1050px){.mission{padding:24px}.mission h3{font-size:20px}.header nav{padding-top:3px}}
@media(max-width:700px){
 .header nav{gap:22px;padding-bottom:2px}.header nav a{padding:11px 0}.hero h1 em:after{height:5px;bottom:-5px;border-top-width:2px}
 .hero{min-height:800px}.hero-art{height:365px}.hero:after{background:linear-gradient(180deg,var(--paper) 0%,var(--paper) 49%,#f7f4eb00 65%)}.hero-copy{padding-top:28px}.hero .tiny-note{font-size:9px;line-height:1.6;max-width:95%}.hero-stamp{padding:12px 18px}
 .coordinates{padding-top:14px;padding-bottom:14px;font-size:8px;letter-spacing:1px}.coordinates span:nth-child(2){text-align:right;max-width:47%}
 .mission{min-height:185px;padding:24px}.mission h3{margin-top:17px}.mission p{font-size:12px;max-width:85%;margin-bottom:0}.mission .number{font-size:9px}.mission .arrow{bottom:18px}
 .person-info{padding:25px 17px 17px}.person-info:before{left:17px}.person-info .bottom{font-size:8px;letter-spacing:.7px;line-height:1.6;gap:7px;margin-top:17px}.person-info p{font-size:11px;line-height:1.6}
 .quote-strip{padding:39px 20px 27px;margin-top:28px}.quote-strip blockquote{font-size:20px}.quote-strip>span{font-size:9px}
 .page-hero{padding-top:32px}.page-hero:after{font-size:125px;top:35px;right:0}.intro{font-size:13px}.chapter-grid{gap:13px}.chapter-details{padding:16px 13px}.chapter-details h2{font-size:18px;min-height:2.6em}.chapter-details p{font-size:11px}.chapter-details .illustrated-label{font-size:7px;letter-spacing:.2px}.chapter-details .text-link{font-size:10px}.chapter-details .text-link span{margin-left:4px}.chapter-cover .ch-no{font-size:8px;left:12px;top:12px}.chapter-cover .chapter-symbol{font-size:49px}
 .book-progress{padding:12px;gap:12px;width:100%}.book-progress progress{width:95px}.book-progress .text-link{font-size:10px}.map-detail h2{margin-top:19px}.map-tag{font-size:8px}.passport-text{border-left:0;border-top:1px dashed #b9bda8}
 .reader-layout aside button{min-height:38px}.reader-top .icon-button{min-height:40px}#reader-content h1{padding-bottom:21px}footer{padding-top:24px;padding-bottom:24px}
}
@media(max-width:380px){.hero h1{font-size:45px}.hero{min-height:780px}.hero-art{height:340px}.hero .eyebrow{font-size:7px}.hero-actions .btn{font-size:10px;padding:14px 10px;gap:10px}.page-hero h1{font-size:34px}.chapter-details h2{font-size:16px}.person-info h3{font-size:22px}.book-progress{gap:10px;font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
#reader.night{--orange:#f39a70}#reader.night .reader-layout aside button.selected{background:#f39a7014}
@media(max-width:700px){.reader-layout aside{scrollbar-width:thin;scrollbar-color:#9daa9270 transparent;padding-bottom:8px}}
.collection .count{white-space:nowrap;flex-shrink:0;position:relative;z-index:1}
@media(max-width:400px){.collection{gap:12px}.collection h3{font-size:15px}.collection .count{font-size:34px}}
@media(max-width:700px){.person-art .badge{font-size:7px;letter-spacing:.6px;padding:7px 8px;left:10px;white-space:nowrap}.section-head:has(.text-link){flex-wrap:wrap;gap:8px}.section-head:has(.text-link)>div{flex-basis:100%}.section-head:has(.text-link) .text-link{padding:3px 0 8px}}

/* A native button stretches across its card, including the cover and empty space. */
.chapter-card{position:relative;cursor:pointer}
.chapter-open:after{content:'';position:absolute;inset:0;z-index:2;border-radius:6px}
.chapter-card:focus-within{outline:3px solid #d18b28;outline-offset:5px}
.chapter-open:focus-visible{outline:none}
.chapter-cover:has(.chapter-cover-hint){padding-bottom:52px}
.chapter-cover-hint{position:absolute;bottom:13px;left:10px;right:10px;text-align:center;font-size:11px;line-height:1.5;color:#38574a}
@media(max-width:700px){.chapter-cover-hint{font-size:9px;line-height:1.5;bottom:10px}.chapter-cover:has(.chapter-cover-hint){padding-bottom:44px}.chapter-cover:has(.chapter-cover-hint) .chapter-symbol{font-size:40px}}

/* Compact chapter summaries: title, description, reading action. */
.chapter-details h2{min-height:0;margin-bottom:10px}
.chapter-details p{min-height:0;margin:0 0 14px}
.chapter-details button{margin-top:auto}

/* The team's watch: a small story detail, carried through the identity. */
.brand-watch{display:block;flex-shrink:0;width:46px;height:57px;transform:rotate(-8deg);transition:transform .25s}
.brand:hover .brand-watch{transform:rotate(0)}
.hero{border-radius:0 0 16px 16px}
.hero-copy{padding-top:40px}.hero h1{margin-top:24px}
.hero-stamp{display:block;right:4%;bottom:28px;min-width:232px;transform:rotate(-4deg);padding:17px 22px;transition:transform .2s}
.hero-stamp:hover{transform:rotate(0) translateY(-3px)}
.ticket-label{font-size:8px;letter-spacing:1.5px;display:block}
.hero-stamp strong{display:block;font-size:22px;margin:7px 0;letter-spacing:-.7px}.hero-stamp strong span{padding:0 8px;font-weight:400}
.ticket-rule{display:block;border-top:1px dashed #82632e70;margin:11px 0 8px}
.ticket-bottom{display:flex;align-items:center;justify-content:space-between;font-size:8px;letter-spacing:1px}.ticket-bottom b{font-size:18px}
.hero-watch-note{position:absolute;z-index:2;right:4%;top:20px;display:flex;align-items:center;gap:12px;background:#f7f4ebed;border:1px solid #fff8;border-radius:8px;padding:11px 16px;box-shadow:0 5px 20px #203d3a12;transform:rotate(2deg);transition:transform .2s}
.hero-watch-note:hover{transform:rotate(0)}.hero-watch-note>span{font-size:11px;font-weight:600}.hero-watch-note small{display:block;font-size:9px;font-weight:400;color:#596c62;margin-top:6px}
.coordinates{letter-spacing:1px}.hero-actions .btn{box-shadow:0 3px 0 #203d3a10}
@media(min-width:1051px){.hero-copy{padding-bottom:62px}.hero .tiny-note{max-width:390px;line-height:1.7}.hero-actions{gap:10px}.hero-actions .btn{padding:16px 18px;font-size:12px}}
@media(max-width:700px){.brand-watch{width:39px;height:48px}.hero{border-radius:0;min-height:835px}.hero-copy{padding-top:28px}.hero-watch-note{top:auto;bottom:276px;right:5%;padding:8px 12px;gap:8px}.hero-watch-note img{width:25px;height:31px}.hero-watch-note>span{font-size:10px}.hero-watch-note small{font-size:8px;margin-top:4px}.hero-stamp{bottom:18px;right:5%;min-width:205px;padding:12px 18px}.hero-stamp strong{font-size:20px}.ticket-label,.ticket-bottom{font-size:7px}.hero h1{margin-top:24px}}
@media(prefers-reduced-motion:reduce){.brand-watch,.hero-watch-note,.hero-stamp{transition:none}}
@media(max-width:700px){.hero-stamp{min-width:0;width:180px;padding:9px 14px;bottom:12px;transform:rotate(-3deg)}.hero-stamp strong{font-size:16px;margin:4px 0}.ticket-rule{margin:6px 0 4px}.ticket-label,.ticket-bottom{font-size:6px;letter-spacing:.7px}.ticket-bottom b{font-size:14px}}

.hero-watch-note img[src*="marker-15"]{width:40px;height:40px}
@media(max-width:700px){.hero-watch-note img[src*="marker-15"]{width:30px;height:30px}}