@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,800;1,400&family=Inter:wght@300;500&display=swap');
*{box-sizing:border-box}body{margin:0;background:#f4f1ec;color:#111;font:300 17px/1.7 Inter,sans-serif}
header{display:flex;justify-content:space-between;align-items:center;padding:22px 5vw;border-bottom:1px solid #111;background:#f4f1ec;position:sticky;top:0;z-index:9}
.logo{display:block;line-height:0}.logo img{height:34px;width:auto}.hero-logo{display:block;width:min(100%,560px);height:auto;margin:50px 0 24px}.flogo{height:22px;vertical-align:middle;margin-right:14px}
.ms{display:grid;grid-template-columns:320px 1fr;gap:5vw;align-items:center;margin-top:110px;padding:60px 5vw;background:#111;color:#f4f1ec;margin-left:-5vw;margin-right:-5vw}.ms img{width:100%;box-shadow:0 20px 50px rgba(0,0,0,.5)}.ms h2{margin:10px 0}.ms .btn{background:#c8102e}@media(max-width:800px){.ms{grid-template-columns:1fr}}
nav a{margin-left:26px;text-decoration:none;color:#111;font-weight:500;font-size:13px;letter-spacing:2px;text-transform:uppercase}nav a.on,nav a:hover{color:#c8102e}
main{padding:0 5vw 80px}h1,h2{font-family:'Playfair Display',serif;font-weight:800;line-height:1.05}
h1{font-size:clamp(48px,9vw,128px);margin:60px 0 10px;letter-spacing:-3px}h2{font-size:40px}
.kicker{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:#c8102e;font-weight:500}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:34px;margin-top:40px}
.card{text-decoration:none;color:#111}.card img{width:100%;aspect-ratio:4/5;object-fit:cover;box-shadow:0 12px 30px rgba(0,0,0,.18);transition:transform .3s}.card:hover img{transform:translateY(-6px) rotate(-1deg)}
.card b{display:block;font:800 22px 'Playfair Display',serif;margin-top:14px}.card small{color:#666;letter-spacing:2px;text-transform:uppercase;font-size:11px}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:5vw;align-items:center}.hero .covers{position:relative;height:580px;margin-top:20px}
.hero .covers img{position:absolute;width:56%;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.prose{max-width:720px}.prose p{margin:0 0 1.2em}blockquote{font:italic 28px/1.3 'Playfair Display',serif;border-left:4px solid #c8102e;margin:40px 0;padding-left:24px}
.src{font-size:13px;color:#555}.src a{color:#c8102e}
.btn{display:inline-block;margin-top:24px;padding:14px 28px;background:#111;color:#fff;text-decoration:none;letter-spacing:3px;font-size:12px;text-transform:uppercase}
.book-wrap{display:flex;justify-content:center;margin:30px 0}.ctrl{text-align:center;font-size:13px;letter-spacing:2px}.ctrl button{background:#111;color:#fff;border:0;padding:10px 22px;margin:0 8px;cursor:pointer;letter-spacing:2px}
.masonry{columns:3 280px;column-gap:18px;margin-top:40px}.masonry img{width:100%;margin-bottom:18px;display:block;filter:grayscale(.15);transition:filter .3s,transform .3s}.masonry img:hover{filter:none;transform:scale(1.02)}
footer{border-top:1px solid #111;padding:30px 5vw;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#555}
@media(max-width:800px){.hero{grid-template-columns:1fr}.hero .covers{height:380px}nav a{margin-left:12px;font-size:11px}}
.mtog{display:none}
@media(max-width:800px){header{flex-wrap:wrap;padding:14px 5vw;gap:0}.mtog{display:flex;align-items:center;justify-content:center;margin-left:auto;width:42px;height:42px;background:none;border:1px solid #111;border-radius:0;color:#111;cursor:pointer;padding:0}.mtog:hover,header.open .mtog{color:#c8102e;border-color:#c8102e}.mtog path{transition:transform .2s,opacity .2s;transform-origin:12px 12px}header.open .mtog .l1{transform:translateY(6px) rotate(45deg)}header.open .mtog .l2{opacity:0}header.open .mtog .l3{transform:translateY(-6px) rotate(-45deg)}nav{display:none;width:100%;flex-direction:column;margin-top:14px;border-top:1px solid #111;max-height:calc(100vh - 80px);overflow-y:auto}header.open nav{display:flex}nav a{margin-left:0;padding:13px 0;font-size:13px;letter-spacing:2px;border-bottom:1px solid rgba(0,0,0,.1)}nav a:last-child{border-bottom:0}main{overflow-x:clip}}
.mcar{display:none}
@media(max-width:800px){.hero .covers,.hgrid{display:none}.mcar{display:block;margin:30px -5vw 0}.mcar .trk{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;padding:8px 14vw 22px;scroll-behavior:smooth}.mcar .trk::-webkit-scrollbar{display:none}.mcar .card{flex:0 0 72vw;scroll-snap-align:center;scroll-snap-stop:always}.mcar .card:hover img{transform:none}.mcar .dots{display:flex;justify-content:center;gap:8px;margin-top:2px}.mcar .dots button{width:8px;height:8px;border-radius:4px;border:0;padding:0;background:#bbb;cursor:pointer;transition:width .25s,background .25s}.mcar .dots button.on{width:22px;background:#c8102e}}