:root{color-scheme:dark;--bg:#090a09;--paper:#f0eee7;--muted:#8e918d;--line:#3d403c;--serif:"Bodoni 72","Didot","Times New Roman",Georgia,serif;--sans:Arial,"Helvetica Neue",Helvetica,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--paper);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid #e8e5d8;outline-offset:5px}
.skip-link{position:fixed;top:-100px;left:20px;z-index:1000;background:white;color:black;padding:12px}.skip-link:focus{top:10px}
.site-frame{position:relative;isolation:isolate;min-height:100svh;background:radial-gradient(ellipse 65% 50% at 55% 60%,#151716 0%,#090a09 75%)}
.header{height:84px;position:relative;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,3.4vw,68px);border-bottom:1px solid #1a1c1a}
.brand{display:inline-flex;align-items:center;gap:11px;min-width:180px;font-family:var(--serif);font-size:22px;letter-spacing:-.045em;line-height:.9}
.brand small{display:block;font:600 8px/2 var(--sans);letter-spacing:.16em;color:#b9b9b2;margin-top:4px}
.brand-icon{width:21px;height:29px;display:flex;gap:3px;align-items:stretch;transform:perspective(120px) rotateY(-11deg)}
.brand-icon i{display:block;width:10px;background:#eee9da;border-radius:1px 1px 2px 2px}
.brand-icon i:first-child{transform:skewY(-10deg);box-shadow:inset -3px 0 #c4c0b4}
.brand-icon i:last-child{transform:skewY(10deg);box-shadow:inset 3px 0 #d1cbbd}
.nav{display:flex;align-items:center;gap:clamp(17px,2vw,34px);position:absolute;left:50%;transform:translateX(-50%)}
.nav__link,.sign-in{appearance:none;border:0;background:transparent;color:#c8c8c1;font-size:11px;line-height:1;cursor:pointer;white-space:nowrap;transition:color .2s}
.nav__link:hover,.sign-in:hover,.nav__active{color:white}
.nav__link span{font-size:10px;margin-left:3px}
.header__actions{display:flex;align-items:center;gap:26px}
.start-btn{display:inline-flex;gap:30px;align-items:center;justify-content:space-between;background:#f0eee8;color:#151612;font-weight:600;font-size:10px;letter-spacing:.015em;padding:15px 17px;min-width:126px;transition:background .2s,transform .2s}
.start-btn:hover{background:white;transform:translateY(-2px)}
.mobile-menu-toggle{display:none;background:none;border:0;color:inherit;cursor:pointer}
.mobile-menu{display:none}
.hero{height:max(690px,calc(100svh - 84px));max-height:1080px;position:relative;overflow:hidden;isolation:isolate}
.hero__topline{position:absolute;left:clamp(22px,3.4vw,68px);right:clamp(22px,3.4vw,68px);top:26px;display:flex;justify-content:space-between;gap:14px;font-size:9px;letter-spacing:.18em;font-weight:600;color:#828680;z-index:6}
.hero__type{position:absolute;top:9%;left:0;right:0;text-align:center;z-index:6;pointer-events:none}
.hero__overline{display:block;color:#c6c5bd;font-size:10px;letter-spacing:.26em;font-weight:500;margin-bottom:0}
.hero__type h1{font-family:var(--serif);font-size:clamp(128px,22.5vw,365px);line-height:.95;font-weight:400;letter-spacing:-.105em;white-space:nowrap;margin:0;transform:translateX(-.035em);color:#efeee8;text-shadow:0 1px 0 rgba(255,255,255,.1)}
.period{color:#eeece7}
.categories{display:flex;justify-content:center;align-items:center;gap:clamp(18px,2.3vw,36px);margin-top:12px;pointer-events:auto;position:relative;z-index:10}
.category{font-size:10px;color:#92938d;background:none;appearance:none;border:0;cursor:pointer;padding:8px 0;transition:color .2s;position:relative}
.category:hover,.category.is-current{color:#f5f4ef}
.category.is-current:after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;opacity:.75}
.books-stage{position:absolute;inset:28% 0 7%;z-index:3;overflow:visible;touch-action:pan-y;cursor:crosshair;pointer-events:none}
.books-stage__inner{width:100%;height:100%;position:relative;perspective:1500px;perspective-origin:55% 50%;pointer-events:none}
.book{touch-action:pan-y;position:absolute;left:0;top:0;border:0;padding:0;display:block;appearance:none;background:transparent;cursor:pointer;transform-style:preserve-3d;pointer-events:auto;isolation:isolate;outline-offset:5px;transition:filter .18s ease}
.book__jacket{width:100%;height:100%;position:relative;overflow:visible;transform:translateZ(0);backface-visibility:hidden}
.book__jacket:after{content:"";position:absolute;inset:0;box-shadow:inset -3px 0 4px rgba(0,0,0,.08),inset 3px 0 4px rgba(255,255,255,.09),inset 0 -1px rgba(0,0,0,.25);pointer-events:none}
.book__jacket img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none;box-shadow:3px 10px 12px #0006,12px 28px 30px #000b;filter:saturate(.91)}
.book__spine{position:absolute;left:0;top:0;width:9%;height:100%;background:linear-gradient(90deg,#000a,#fff2 25%,#0005 83%,#0009);transform:translateX(-90%) skewY(-4deg);transform-origin:right;box-shadow:-2px 4px 8px #0008;opacity:.8}
.book__pages{position:absolute;bottom:0;left:2px;width:98%;height:5px;background:linear-gradient(to bottom,#f8f4e8,#b8b1a8);transform:translate(6px,5px) skewX(51deg);opacity:.8}
.book:hover .book__jacket img,.book:focus-visible .book__jacket img{filter:saturate(1.13) contrast(1.025)}
.book:focus-visible{outline:2px solid #f5e6b3}
.book-title-tip{position:fixed;left:0;top:0;z-index:18;pointer-events:none;background:#eae8e0;color:#131411;padding:8px 10px;font-size:10px;letter-spacing:.025em;white-space:nowrap;opacity:0;transform:translate(14px,-12px);transition:opacity .14s ease}
.book-title-tip.is-visible{opacity:1}
.hero__bottom{position:absolute;z-index:9;bottom:30px;left:clamp(22px,3.4vw,68px);right:clamp(22px,3.4vw,68px);display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.hero__intro{display:flex;align-items:flex-start;gap:18px;color:#d6d6ce}
.hero__intro p{margin:0;font-family:var(--serif);font-size:clamp(18px,2vw,29px);line-height:1.02;letter-spacing:-.045em}
.label-corner{font-size:22px;margin-top:-2px;color:#b5b9b2}
.hero__guide{display:flex;align-items:center;gap:14px;color:#b6b7b0;letter-spacing:.17em;font-size:9px;font-weight:600;transform:translateX(20px)}
.guide-line{width:44px;height:1px;background:#5e615e}
.guide-arrow{font-size:14px;margin-left:2px}
.hero__controls{display:flex;align-items:center;gap:7px}
.hero__controls>span{font-variant-numeric:tabular-nums;color:#d0cfc7;font-size:10px;letter-spacing:.12em;margin-right:22px;white-space:nowrap}
.hero__controls button{width:40px;height:40px;background:none;border:1px solid #4a4c48;color:#e8e7df;cursor:pointer;font-family:Arial,sans-serif;font-size:19px;transition:background .2s,border .2s}
.hero__controls button:hover{background:#f0eee7;color:#161716;border-color:#f0eee7}
.after-hero{min-height:280px;background:#e9e8e0;color:#181a18;display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:52px clamp(22px,3.4vw,68px);gap:24px}
.after-hero>span{font:700 10px var(--sans);letter-spacing:.18em}
.after-hero p{font:400 clamp(27px,3.6vw,56px)/.98 var(--serif);letter-spacing:-.055em;margin:0;max-width:600px}
.after-hero a{justify-self:end;font-size:11px;border-bottom:1px solid currentColor;padding-bottom:8px;white-space:nowrap}
.footer{display:flex;justify-content:space-between;padding:22px clamp(22px,3.4vw,68px);gap:18px;color:#787d77;font-size:9px;letter-spacing:.15em}
.footer a:hover{color:white}
.book-panel-backdrop{position:fixed;inset:0;z-index:49;background:#0008;opacity:0;transition:opacity .3s}
.book-panel-backdrop.is-open{opacity:1}
.book-panel{position:fixed;right:0;top:0;bottom:0;width:min(440px,100%);z-index:50;background:#ece9e1;color:#141715;padding:28px clamp(24px,3vw,45px) 32px;overflow-y:auto;box-shadow:-20px 0 65px #0008;transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;gap:0}
.book-panel.is-open{transform:translateX(0)}
.book-panel__head{display:flex;align-items:center;justify-content:space-between;font-size:9px;letter-spacing:.16em;font-weight:700}
.book-panel__head button{background:none;border:0;font-size:32px;font-family:var(--sans);color:#202522;cursor:pointer;line-height:1}
.book-panel__art{height:min(37vh,310px);margin:23px auto 24px;display:flex;align-items:center;justify-content:center;perspective:800px;width:100%}
.book-panel__art img{max-height:100%;max-width:88%;box-shadow:12px 16px 0 #191f1f18,15px 23px 28px #14181140;transform:rotateY(-8deg) rotateZ(-3deg)}
.book-panel__kicker{font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:#656761;margin:4px 0 15px}
.book-panel h2{font:400 clamp(35px,4.2vw,56px)/.92 var(--serif);letter-spacing:-.06em;margin:0}
.book-panel__author{font:italic 20px/1.1 var(--serif);margin:10px 0 20px;color:#575954}
.book-panel__summary{color:#535651;line-height:1.55;font-size:13px;max-width:34ch;margin:0 0 24px}
.book-panel #detailOpen{display:flex;justify-content:space-between;align-items:center;padding:15px 17px;background:#1b1d1a;color:white;font-size:12px;margin-top:auto;transition:background .2s}
.book-panel #detailOpen:hover{background:#3b4038}
.book-panel__note{font-size:10px;color:#777971;margin-top:15px;line-height:1.4}
.sr-only{position:absolute!important;height:1px;width:1px;clip:rect(0,0,0,0);overflow:hidden;white-space:nowrap}
@media(min-width:1700px){.hero__type{top:8%}.books-stage{top:28%}}
@media(max-width:1030px){
 .nav{gap:17px}.header__actions{gap:13px}.brand{min-width:145px}
 .hero{max-height:950px}.hero__type{top:13%}.hero__type h1{font-size:23.5vw}
 .books-stage{top:30%}
 .hero__guide{display:none}
}
@media(max-width:720px){
 .header{height:69px;padding:0 22px}.brand{font-size:21px;min-width:0}.brand-icon{width:18px;height:25px}.brand small{font-size:7px}
 .nav,.header__actions{display:none}
 .mobile-menu-toggle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:40px;height:40px;padding:0}
 .mobile-menu-toggle span{display:block;width:20px;height:1px;background:#f0eee7}
 .mobile-menu{position:absolute;z-index:35;left:0;right:0;top:69px;background:#171916;border-top:1px solid #454744;padding:24px 26px 28px}
 .mobile-menu:not([hidden]){display:flex;flex-direction:column;gap:22px}
 .mobile-menu a{font:500 17px var(--serif)}
 .hero{height:calc(100svh - 69px);min-height:620px;max-height:none}
 .hero__topline{top:22px;left:22px;right:22px;font-size:7px;letter-spacing:.13em}
 .hero__topline span:last-child{display:none}
 .hero__type{top:13%;text-align:left;left:20px;right:20px}
 .hero__overline{font-size:8px;letter-spacing:.17em}
 .hero__type h1{font-size:clamp(77px,23vw,175px);line-height:1.03;letter-spacing:-.106em;transform:none}
 .categories{justify-content:flex-start;gap:22px;overflow-x:auto;max-width:100%;padding:4px 1px 10px;scrollbar-width:none}
 .categories::-webkit-scrollbar{display:none}
 .category{font-size:10px;flex:0 0 auto}
 .books-stage{inset:31% 0 12%;touch-action:pan-y}
 .hero__bottom{left:22px;right:22px;bottom:26px}
 .hero__intro{gap:9px}.hero__intro p{font-size:20px}.label-corner{font-size:18px}
 .hero__controls{gap:5px}.hero__controls>span{margin-right:6px;font-size:9px}
 .hero__controls button{height:35px;width:35px}
 .after-hero{min-height:260px;grid-template-columns:1fr;gap:24px;padding:42px 22px}
 .after-hero p{font-size:40px}
 .after-hero a{justify-self:start}
 .footer{padding:20px 22px;font-size:8px;gap:10px}.footer span:nth-child(2){display:none}
 .book-panel{padding:24px 28px}
}
@media(max-width:390px){.hero__type h1{font-size:24vw}.hero__intro p{font-size:18px}.hero__controls>span{font-size:8px;margin-right:3px}}
@media(hover:none){.books-stage{cursor:default}.book-title-tip{display:none}}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
 .book,.book:hover{transition:none}
}