/* Approved NANLEX brand / product story layouts. Admin retains style.css. */
:root{--brand-gold:#efc78d;--directory-sans:"Noto Sans TC",var(--sans)}
.nanlex{--bg:#121212;--text:#f7f5f0;--muted:#aaa6a0;--border:#ffffff32;background:var(--bg);color:var(--text)}
.nanlex-header{height:126px;background:transparent;border:0}
.nanlex-header .header-inner{max-width:none;padding:30px 3vw;align-items:flex-start}
.nanlex-brand img{width:200px;height:auto}
.nanlex-brand .brand-logo-light{display:none}
[data-theme=light] .nanlex-reader .brand-logo-dark,[data-theme=light] .admin-page .brand-logo-dark{display:none}
[data-theme=light] .nanlex-reader .brand-logo-light,[data-theme=light] .admin-page .brand-logo-light{display:block}
.nanlex .nanlex-header{position:absolute;inset:0 0 auto;pointer-events:none}
.nanlex .nanlex-brand{pointer-events:auto}
.brand-home{min-height:100dvh;background:#111}
.brand-canvas{height:100dvh}
.directory-page{--directory-heading-inset:4.7vw;height:100dvh;overflow:hidden}
.directory-page #main{height:100%;display:grid;grid-template-rows:48.5% minmax(0,1fr)}
.story-banner{position:relative;min-height:0;background:#191613;overflow:hidden;color:#fff}
.story-visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-position,68%) center}
.story-banner-copy{position:absolute;inset:29% auto auto var(--directory-heading-inset);text-shadow:0 2px 24px #0005}
.story-banner-copy>p{font-family:"Times New Roman",Times,serif;font-size:clamp(70px,6.7vw,140px);font-weight:400;line-height:1.12;letter-spacing:.1em;transform:scaleX(1.15);transform-origin:left center;width:max-content}
.story-banner-copy h1{font-family:var(--directory-sans);font-weight:400;font-size:clamp(25px,2.9vw,58px);letter-spacing:.1em;line-height:1.4;margin-top:20px;transform:scaleX(1.15);transform-origin:left center;width:86.9565%}
.chapter-collection{padding:0 3.2vw 18px;min-width:0;min-height:0;display:flex;flex-direction:column;background:#121212;color:#fff}
.collection-heading{display:flex;align-items:center;justify-content:space-between;flex:0 0 26%;border-bottom:1px solid #ffffff40;padding:12px 1.5vw;gap:20px}
.collection-heading h2{font-family:var(--directory-sans);font-weight:400;transform:scaleX(1.15);transform-origin:left center;font-size:clamp(14px,1.25vw,24px);letter-spacing:.1em;line-height:1.35}
.collection-heading h2 span{display:block;font-family:inherit;font-size:clamp(22px,1.75vw,34px);letter-spacing:.1em}
.resume-link{font-size:12px;letter-spacing:.08em;color:var(--brand-gold)}
.chapter-gallery{position:relative;flex:1;min-height:0;padding-top:24px}
.chapter-rail{display:flex;gap:2.3vw;height:100%;overflow:auto hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 2.2vw;align-items:start}
.chapter-rail::-webkit-scrollbar{display:none}
.chapter-card{flex:0 0 calc((100% - (var(--chapter-count,4) - 1)*2.3vw)/var(--chapter-count,4));min-width:0;max-width:none;height:100%;scroll-snap-align:start;display:flex;flex-direction:column;gap:9px}
.chapter-image{position:relative;min-height:0;flex:1;max-height:360px;background:#29221b;overflow:hidden}
.chapter-image img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.chapter-image>span{font-family:"Times New Roman",Times,serif;letter-spacing:.1em;transform:scaleX(1.15);transform-origin:left center;position:absolute;left:7%;top:0;font-weight:400;font-size:clamp(28px,2.7vw,52px);line-height:1.6;text-shadow:0 2px 12px #0009}
.chapter-card h3{font-size:16px;text-align:center;font-weight:400;letter-spacing:.14em;color:#bdb7af;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter-card:hover img{transform:scale(1.035)}
.chapter-card:hover h3{color:var(--brand-gold)}
.rail-arrow{position:absolute;top:50%;transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background:#16161675;backdrop-filter:blur(8px);width:58px;height:58px;line-height:1;font-size:38px;z-index:2;color:#fff}
.rail-previous{left:0}.rail-next{right:0}.rail-arrow:disabled{visibility:hidden}
.empty-chapters{align-self:center;color:#bdb7af}
.nanlex-reader{--reader-gutter:3vw;background:#090908;min-height:100dvh}
.nanlex-reader .nanlex-header{position:fixed;height:120px}
.reader-backdrop{position:fixed;inset:0;z-index:-1;background-size:cover;background-position:center;pointer-events:none}
.reading-progress{position:fixed;inset:0 auto auto 0;height:2px;width:0;background:var(--brand-gold);z-index:50}
.reader-sidebar{position:fixed;left:0;top:0;bottom:0;width:19.3%;background:#000c;padding:157px var(--reader-gutter) 30px;overflow-y:auto;scrollbar-width:thin}
.sidebar-character{padding:0}
.sidebar-character>span{font-size:clamp(17px,1.5vw,29px);letter-spacing:.07em}
.sidebar-character h2{font-size:clamp(27px,2.75vw,54px);font-weight:400;line-height:1.5;letter-spacing:.08em}
.sidebar-character small{display:block;font-size:clamp(10px,.82vw,16px);letter-spacing:.2em;word-spacing:1em;margin-top:9px}
.sidebar-chapters-label{display:block;font-size:clamp(17px,1.5vw,29px);letter-spacing:.1em;margin:43px 0 28px}
.reader-sidebar nav{display:flex;flex-direction:column;gap:16px}
.reader-sidebar nav a{display:flex;gap:1.8vw;align-items:baseline;padding:12px 0;font-size:clamp(12px,1.1vw,22px);letter-spacing:.07em;line-height:1.7}
.reader-sidebar nav a span{flex-shrink:0}
.reader-sidebar nav a[aria-current],.reader-sidebar nav a:hover{color:var(--brand-gold)}
.sidebar-home{display:inline-block;margin:38px 0 0;font-size:12px;color:#c7c0b4;letter-spacing:.06em}
.reader-main{margin-left:19.3%;padding:130px 17.5% 100px 13.2%;min-width:0}
.nanlex-reader .reading-paper{padding:0;border:0;border-radius:0;background:transparent;min-width:0}
.nanlex-reader .chapter-heading{text-align:left;padding:0 2vw 46px;margin:0 -2vw 49px;border-bottom:1px solid #ffffff40}
.nanlex-reader .chapter-heading .eyebrow{font-size:clamp(14px,1.15vw,22px);color:inherit;letter-spacing:.1em;font-weight:300}
.nanlex-reader .chapter-heading h1{font-family:var(--sans);font-weight:400;font-size:clamp(27px,2.6vw,50px);letter-spacing:.25em;line-height:1.5;margin:13px 0 0}
.nanlex-reader .chapter-prose{font-family:var(--sans);font-size:var(--reading-size,22px);line-height:1.75;letter-spacing:.2em;text-shadow:0 1px 5px #0008}
.nanlex-reader .chapter-prose p{text-indent:0;margin:0 0 1.55em;white-space:pre-wrap}
.nanlex-reader .chapter-end{text-align:center;margin:55px 0 15px;color:#b5ada1}
.reading-saved{text-align:center;color:#a39c91;font-size:10px;letter-spacing:.1em;margin:15px 0 28px}
.nanlex-reader .chapter-navigation{display:flex;align-items:center;justify-content:space-between;padding:25px 0;border-top:1px solid #ffffff40;gap:15px;font-size:12px}
.chapter-navigation a{display:flex;align-items:center;gap:12px}.chapter-navigation a:hover{color:var(--brand-gold)}.chapter-navigation .disabled{color:#8e887f}
.nanlex-reader .reader-tools{position:fixed;left:auto;right:5.5%;bottom:7%;top:auto;margin:0;padding:0;width:47px;border:1px solid #ffffff4d;border-radius:0;display:flex;flex-direction:column;background:#191919a3;backdrop-filter:blur(12px);z-index:35;color:#ddd}
.reader-tools .font-controls{display:flex;flex-direction:column;padding:8px 0;border-bottom:1px solid #ffffff4d;gap:0}
.reader-tools .font-controls button{min-height:43px;width:100%;padding:4px 0;display:flex;align-items:baseline;justify-content:center;gap:3px;color:#bfbdb9}
.reader-tools button[data-font="18"]{font-size:17px}.reader-tools button[data-font="22"]{font-size:21px}.reader-tools button[data-font="26"]{font-size:25px}
.reader-tools .font-controls button[aria-pressed=true]{color:var(--brand-gold);background:#ffffff08}
.reader-tools .font-controls small{font-size:10px}
.reader-tools>button{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:23px;min-height:63px;border-bottom:1px solid #ffffff4d;padding:5px 0;line-height:1.2}
.reader-tools>button:last-child{border:0}.reader-tools>button small{font-size:9px;margin-top:5px}
#toc-dialog{max-height:80dvh;width:min(510px,90vw);padding:25px;background:#171615;color:#eee;border:1px solid #6b5a42}
#toc-dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}
.toc-list{margin-top:22px}.toc-list a{display:flex;gap:20px;padding:15px 0;border-bottom:1px solid #ffffff24;font-size:14px}#toc-dialog .toc-list a[aria-current=page]{color:#ffd392;background:#3f3e3c}
#toc-dialog .toc-list a{padding:15px 14px;color:#c5c2bc}
#toc-dialog #close-toc{display:grid;place-items:center;padding:0;line-height:1;border-color:#ffffff32;color:#eee}
#toc-dialog #close-toc svg{display:block;width:16px;height:16px}
[data-theme=light] .nanlex-reader{color:#29231c;background:#f0e8dc}
[data-theme=light] .nanlex-reader .reader-backdrop{opacity:.1}
[data-theme=light] .nanlex-reader .reader-sidebar{background:#f7f1e8ed}
[data-theme=light] .nanlex-reader .nanlex-brand{background:transparent;padding:0}
[data-theme=light] .nanlex-reader .chapter-prose{text-shadow:none}
[data-theme=light] .nanlex-reader .chapter-heading,[data-theme=light] .nanlex-reader .chapter-navigation{border-color:#362f2636}
[data-theme=light] .nanlex-reader .sidebar-home,[data-theme=light] .reading-saved{color:#766753}
[data-theme=light] .nanlex-reader .reader-sidebar nav a[aria-current],[data-theme=light] .nanlex-reader .reader-sidebar nav a:hover{color:#946226}
[data-theme=light] .nanlex-reader .reader-tools{background:#f5efe4e8;border-color:#9f9382;color:#433a30}
[data-theme=light] .reader-tools .font-controls button{color:#5c5144}
[data-theme=light] .reader-tools .font-controls button[aria-pressed=true]{color:#895821;background:#00000008}
.admin-page .nanlex-header{height:94px;background:var(--bg);border-bottom:1px solid var(--border)}
.admin-page .nanlex-header .header-inner{padding:16px 32px;align-items:center}
.admin-page .nanlex-brand img{width:160px}
[data-theme=light] .admin-page .nanlex-brand{background:transparent;padding:0}
.chapter-art-fields{margin-bottom:25px}
@media(max-width:1100px){
 .nanlex-header .header-inner{padding:24px}.nanlex-brand img{width:160px}
 .story-banner-copy{top:34%;left:var(--directory-heading-inset)}.story-banner-copy>p{font-size:9vw}.story-banner-copy h1{font-size:3.6vw;margin-top:12px}
 .nanlex-reader{--reader-gutter:24px}.reader-sidebar{width:24%;padding-top:135px}.reader-main{margin-left:24%;padding:130px 10% 80px 5%}.nanlex-reader .reader-tools{right:3%}.sidebar-chapters-label{margin-top:40px}.reader-sidebar nav a{gap:12px;padding:12px 0}
 .nanlex-reader .chapter-prose{letter-spacing:.1em;line-height:1.95}
}
@media(max-width:760px){
 .nanlex-header{height:92px}.nanlex-header .header-inner{padding:22px}.nanlex-brand img{width:132px}
 .directory-page #main{grid-template-rows:48% minmax(0,1fr)}
 .directory-page .nanlex-header{height:110px;background:linear-gradient(#0009,#0005 65%,transparent)}
 .story-visual{object-position:var(--hero-position-mobile,73%) center}
 .story-banner:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0009,transparent 70%);pointer-events:none}
 .story-banner-copy{inset:auto 22px 25px;z-index:1}.story-banner-copy>p{font-size:clamp(44px,12.5vw,90px);letter-spacing:.1em}.story-banner-copy h1{font-size:24px;margin-top:2px}
 .chapter-collection{padding:0 20px 18px}.collection-heading{flex-basis:24%;padding:10px 2px;gap:12px}.collection-heading h2{font-size:13px}.collection-heading h2 span{font-size:22px}.resume-link{max-width:125px;text-align:right;font-size:10px}
 .chapter-gallery{padding-top:18px}.chapter-rail{gap:18px;padding:0 2px 0}.chapter-card{flex-basis:72%;max-width:310px}.chapter-image>span{font-size:36px;left:16px}.chapter-card h3{font-size:14px}.rail-arrow{width:42px;height:42px;font-size:28px}.rail-previous{left:-8px}.rail-next{right:-8px}
 .nanlex-reader .nanlex-header{height:104px;background:#090908}
 .reader-sidebar{display:none}.reader-main{margin:0;padding:127px 25px 115px}.nanlex-reader .chapter-heading{margin:0 0 30px;padding:0 0 26px}.nanlex-reader .chapter-heading h1{font-size:30px;letter-spacing:.13em;margin-top:10px}.nanlex-reader .chapter-heading .eyebrow{font-size:13px}.nanlex-reader .chapter-prose{line-height:1.95;letter-spacing:.075em}.nanlex-reader .chapter-prose p{margin-bottom:1.6em}
 .nanlex-reader .reader-tools{right:0;bottom:0;left:0;width:100%;height:calc(66px + env(safe-area-inset-bottom));padding:0 15px env(safe-area-inset-bottom);flex-direction:row;justify-content:space-around;border-width:1px 0 0}
 .reader-tools .font-controls{flex-direction:row;border:0;align-items:stretch;gap:3px;padding:0}.reader-tools .font-controls button{width:39px;height:56px;min-height:44px;padding:0 0 8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;line-height:1.2}.reader-tools .font-controls button small{display:block;margin:0;font-size:9px;line-height:1.2}.reader-tools>button{border:0;min-width:44px;height:56px;min-height:56px;font-size:22px;padding:0 0 8px;justify-content:flex-end}.reader-tools>button small{font-size:9px;line-height:1.2;margin-top:3px}
 [data-theme=light] .nanlex-reader .nanlex-header{background:#f0e8dc}
 .nanlex-reader .chapter-navigation{font-size:11px;gap:8px}.chapter-navigation a{gap:5px}
 .admin-page .nanlex-header{height:78px}.admin-page .nanlex-header .header-inner{padding:12px 22px}.admin-page .nanlex-brand img{width:132px}
}
@media(max-height:600px) and (min-width:761px){.nanlex-reader{--reader-gutter:3vw}.nanlex-brand img{width:125px}.nanlex-header .header-inner{padding:18px 3vw}.story-banner-copy{top:32%}.story-banner-copy>p{font-size:12vh}.story-banner-copy h1{font-size:5vh;margin-top:6px}.collection-heading h2{font-size:12px}.collection-heading h2 span{font-size:19px}.chapter-gallery{padding-top:12px}.chapter-image>span{font-size:30px}}
@media(max-height:500px) and (max-width:900px){.directory-page #main{grid-template-columns:42% 58%;grid-template-rows:100%}.directory-page .story-banner-copy>p{font-size:5.5vw}.directory-page .story-banner-copy h1{font-size:18px}.directory-page .chapter-card{flex-basis:65%}.directory-page .collection-heading{flex-basis:26%}.directory-page .collection-heading h2 span{font-size:19px}.directory-page .collection-heading h2{font-size:11px}.directory-page .resume-link{font-size:9px}.directory-page .chapter-collection{padding:0 18px 14px}.directory-page .chapter-image>span{font-size:28px}}
/* 1002 desktop art feedback: tighter titles and a lower hero composition. */
@media(min-width:901px),(min-width:761px) and (min-height:501px){
 .story-visual{object-position:var(--hero-position,68%) 42%}
 .story-banner-copy{top:38%}
 .story-banner-copy h1{margin-top:4px;line-height:1.2}
}
@media(prefers-reduced-motion:reduce){.chapter-card:hover img{transform:none}}

/* 1006 age confirmation: supplied artwork, separate portrait composition. */
.nanlex-gate{min-height:100vh;min-height:100dvh;background:#080604;color:#e9e4dc;isolation:isolate}
.nanlex-gate #main{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:130px 0 100px}
.age-art{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.age-art img{width:100%;height:100%;object-fit:cover;object-position:center}
.age-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0002,transparent 70%)}
.age-confirmation{width:49%;margin-left:5.5%;text-align:center;text-shadow:0 2px 10px #0009}
.age-confirmation h1{font-size:clamp(26px,2.8vw,56px);font-weight:400;letter-spacing:.18em;line-height:1.5;white-space:nowrap}
.age-ornament{display:flex;align-items:center;justify-content:center;gap:6px;width:50%;margin:22px auto 28px;color:#bca17d}
.age-ornament::before,.age-ornament::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,currentColor)}
.age-ornament::after{transform:rotate(180deg)}
.age-ornament span{width:5px;height:5px;transform:rotate(45deg);border:1px solid currentColor;box-shadow:3px -3px 0 -1px #bca17d}
.age-confirmation p{font-size:clamp(12px,1.32vw,26px);letter-spacing:.12em;line-height:1.8}
.age-actions{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:clamp(38px,4.5vw,86px)}
.age-actions form{min-width:0}
.age-choice{position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:clamp(56px,4.8vw,92px);padding:12px 38px;border:1px solid #ad96725c;border-radius:0;color:#c6bfb3;background:linear-gradient(90deg,#100d0ade,#302a23e8);font-size:clamp(14px,1.3vw,25px);letter-spacing:.1em;line-height:1.5;text-shadow:none}
.age-choice span{position:absolute;right:8%;font-size:1.5em;font-weight:300;line-height:1;letter-spacing:0}
.age-accept{background:linear-gradient(100deg,#a47b58,#735035);color:#e6d6c1;border-color:#c5a78488}
.age-choice:hover{filter:brightness(1.15)}
.age-choice:focus-visible{outline:2px solid #efc78d;outline-offset:4px}
@media(max-width:1100px) and (orientation:portrait){
 .nanlex-gate .nanlex-header{height:auto}
 .nanlex-gate .header-inner{justify-content:center;padding:calc(27px + env(safe-area-inset-top,0px)) 22px 0}
 .nanlex-gate .nanlex-brand img{width:132px}
 .nanlex-gate #main{align-items:flex-end;padding:0 0 max(32px,calc(7vh + env(safe-area-inset-bottom,0px)));padding-bottom:max(32px,calc(7svh + env(safe-area-inset-bottom,0px)))}
 .age-art img{object-position:56% center}
 .age-art::after{background:linear-gradient(0deg,#080604 0%,#080604bb 30%,#08060444 43%,transparent 58%)}
 .age-confirmation{width:100%;margin:0;padding:45vh max(28px,env(safe-area-inset-right,0px)) 0 max(28px,env(safe-area-inset-left,0px));padding-top:45svh}
 .age-confirmation h1{font-size:clamp(20px,5.7vw,30px);letter-spacing:.12em}
 .age-ornament{margin:13px auto 16px;width:62%;max-width:230px}
 .age-confirmation p{font-size:clamp(10px,2.7vw,14px);letter-spacing:.04em;white-space:nowrap}
 .age-actions{grid-template-columns:1fr;gap:14px;margin:36px auto 0;max-width:320px;width:92%}
 .age-choice{min-height:56px;font-size:16px}
}
@media(max-height:500px) and (orientation:landscape){
 .nanlex-gate #main{padding:80px max(20px,env(safe-area-inset-right,0px)) 25px max(20px,env(safe-area-inset-left,0px))}
 .age-confirmation{width:53%;margin:0}
 .age-confirmation h1{font-size:25px;letter-spacing:.1em}
 .age-ornament{margin:12px auto 16px}
 .age-confirmation p{font-size:11px;letter-spacing:.03em}
 .age-actions{gap:12px;margin-top:24px}
 .age-choice{min-height:48px;font-size:13px;padding:10px 24px 10px 12px}
}
/* Keep controls clear of iPhone's sensor housing and home indicator. */
@media(max-width:760px){
 .nanlex-reader .nanlex-header{height:calc(104px + env(safe-area-inset-top,0px))}
 .nanlex-reader .header-inner{padding-top:calc(22px + env(safe-area-inset-top,0px));padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
 .reader-main{padding-top:calc(127px + env(safe-area-inset-top,0px));padding-bottom:calc(115px + env(safe-area-inset-bottom,0px));padding-left:max(25px,env(safe-area-inset-left,0px));padding-right:max(25px,env(safe-area-inset-right,0px))}
 .nanlex-reader .reader-tools{padding-left:max(15px,env(safe-area-inset-left,0px));padding-right:max(15px,env(safe-area-inset-right,0px))}
 .directory-page .header-inner{padding-top:calc(22px + env(safe-area-inset-top,0px))}
 .directory-page .chapter-collection{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
}

@media(max-width:760px) and (max-height:670px) and (orientation:portrait){
 .age-actions{margin-top:24px;gap:10px}
 .age-choice{min-height:48px;font-size:14px}
 .age-ornament{margin:10px auto 12px}
}
/* Mobile reader: four equal controls and an on-demand font-size selector. */
.reader-tools .font-size-tool{position:relative;width:100%}
.reader-tools .font-size-toggle{display:none}
@media(max-width:760px){
 .nanlex-reader .reader-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:center;background:#191919f5;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
 .reader-tools>button,.reader-tools .font-size-toggle{width:100%;height:56px;min-height:56px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;padding:0 0 8px;font-size:22px;line-height:1.2}
 .reader-tools .font-size-toggle small{font-size:9px;line-height:1.2;margin-top:3px}
 .reader-tools .font-size-tool:not(.is-open) .font-controls{display:none}
 .reader-tools .font-controls{position:absolute;bottom:calc(100% + 8px);left:8px;display:flex;flex-direction:row;align-items:center;gap:0;width:132px;padding:0;border:1px solid #ffffff32;border-radius:3px;background:#333331;box-shadow:0 4px 15px #0005}
 .reader-tools .font-controls button{flex:1;width:44px;height:44px;min-height:44px;padding:0;justify-content:center;gap:0}
 .reader-tools .font-controls .font-sample{display:none}
 .reader-tools .font-controls button small{font-size:16px;line-height:1.2;margin:0}
 .reader-tools .font-size-toggle[aria-expanded=true]{color:var(--brand-gold)}
 [data-theme=light] .reader-tools .font-controls{background:#f5efe4;border-color:#9f9382}
 [data-theme=light] .reader-tools .font-size-toggle[aria-expanded=true]{color:#895821}
}