@font-face{font-family:'Kaushan Script';font-style:normal;font-weight:400;font-display:swap;src:url('assets/kaushan-script.ttf') format('truetype')}
*{box-sizing:border-box}html{background:#f4f2e9;color:#1c1c1c}body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:#f4f2e9;font-family:'Helvetica Neue',Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #202020;outline-offset:6px}::selection{background:#222;color:#fff}[hidden]{display:none!important}header{height:96px;flex-shrink:0;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:30px}.brand{display:block;width:280px}.brand img{display:block;width:100%;height:auto}.brand-motto,.footer-motto{font-family:'Kaushan Script',cursive;font-size:25px;white-space:nowrap}.location{font-size:18px;letter-spacing:.2px;display:flex;align-items:center;gap:8px;color:#838383}.location i{width:4px;height:4px;border-radius:50%;background:#888}main{width:min(1120px,90%);margin:auto;padding:29px 0 0}.story{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:stretch}.film-column{min-width:0}.film-frame{width:min(100%,480px);margin:0 auto;padding:0;border-radius:50%;background:none}.film{aspect-ratio:1;position:relative;overflow:hidden;border-radius:50%;background:#f4f2ed;isolation:isolate;clip-path:circle(50% at 50% 50%)}.shot{position:absolute;inset:0 -25%;background-image:url('assets/bookshop-story.png');background-size:200% 300%;background-position:var(--x) var(--y);opacity:0;transform:scale(1.025);transition:opacity 1.2s ease;will-change:opacity}.shot.is-current{opacity:1;z-index:2;animation:drift var(--duration,4s) linear both}.shot.is-exiting{opacity:0;z-index:3}.film.is-paused .shot{animation-play-state:paused}.shot[data-shot='1'],.shot[data-shot='4']{transform-origin:65% 50%}.shot[data-shot='2'],.shot[data-shot='5']{transform-origin:35% 40%}.film-vignette{position:absolute;inset:0;background:radial-gradient(circle,transparent 60%,#1c15100a);z-index:4;pointer-events:none;border-radius:50%}.film-loading{position:absolute;inset:0;background:#f4f2ed;z-index:7;display:grid;place-items:center;font-family:Georgia,serif;font-style:italic;color:#777;font-size:18px;transition:opacity .5s}.film-loading.is-ready{opacity:0;pointer-events:none}.player{height:49px;width:min(100%,480px);margin:5px auto 0;display:flex;align-items:center;justify-content:space-between;gap:18px}.player>button{border:0;background:none;display:flex;align-items:center;gap:8px;padding:9px 0;font-size:9px;white-space:nowrap;color:#7c7c7c}.player>button:hover{color:#111}.play-icon{font-size:13px;min-width:14px}.player #replay span{font-size:19px}.film-timeline{display:flex;gap:6px;flex:1;max-width:220px}.film-timeline button{height:29px;position:relative;flex:1;border:0;padding:13px 0;background:none}.film-timeline button:before{content:'';position:absolute;left:0;right:0;top:13px;height:2px;background:#e9e9e9}.film-timeline i{display:block;height:2px;background:#252525;position:relative;z-index:1;transform:scaleX(var(--progress,0));transform-origin:left;transition:transform .1s linear}.story-copy{padding:15px 0 49px 0;display:flex;flex-direction:column;position:relative}.story-kicker{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:8px;letter-spacing:1.8px;color:#969696}.story-kicker i{font-size:21px;line-height:1;font-style:normal;color:#3c3c3c}.scene-copy{flex:1;display:flex;flex-direction:column;justify-content:center;padding:30px 0 40px}.scene-count{display:flex;align-items:center;gap:10px;font-size:7px;letter-spacing:1.8px;color:#9a9a9a;margin:0 0 24px}.scene-count>span:first-child{font-size:12px;letter-spacing:0}.scene-line{height:1px;width:22px;background:#d6d6d6}h1{font-family:'Helvetica Neue',Arial,Helvetica,sans-serif;font-weight:400;letter-spacing:-3.6px;font-size:clamp(48px,4.9vw,72px);line-height:1.06;margin:0 0 27px}h1 em{font-style:normal;font-weight:400;color:#8a8a8a}.scene-text{font-size:14px;color:#8b8b8b;line-height:1.9;margin:0;white-space:pre-line}.scene-copy.is-finale h1{font-family:'Kaushan Script',cursive;font-size:clamp(43px,4.4vw,64px);line-height:1.4;letter-spacing:-1px;color:#202020}.scene-copy.is-finale .scene-text{max-width:290px}.copy-bottom{position:absolute;bottom:52px;left:0;right:0;border-top:1px solid #ededed;padding-top:17px;display:flex;justify-content:space-between;gap:15px;font-size:10px;color:#a0a0a0}.copy-bottom span:last-child{font-size:8px;letter-spacing:1px}.shop-links{display:flex;align-items:flex-start;justify-content:center;gap:64px;margin:14px 0 0;padding:11px 0 12px}.shop-link{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:108px;color:#626262;font-size:11px;transition:translate .2s,color .2s}.shop-link img{display:block;width:74px;height:74px;object-fit:contain;border-radius:18px;transition:transform .25s}.dolap img{border-radius:50%}.shop-link:hover{translate:0 -3px;color:#111}.shop-link:hover img{transform:scale(1.045)}.afterword{height:67px;display:flex;align-items:center;gap:24px;color:#9b9b9b;position:relative}.afterword p{font-size:11px;margin:0}.afterword>span{font-size:9px;border-left:1px solid #e5e5e5;padding-left:24px}.afterword img{width:98px;height:auto;margin-left:auto;opacity:.6}footer{min-height:53px;padding:15px 5%;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #eee;gap:20px;font-size:8px;color:#999;flex-shrink:0}.footer-motto{font-size:17px;color:#777}@keyframes drift{from{transform:scale(1.025) translateX(-.25%)}to{transform:scale(1.075) translateX(.3%)}}@keyframes copy-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}.scene-copy.is-new{animation:copy-in .8s ease both}
@media(min-width:1600px) and (min-height:1000px){main{width:min(1310px,88%)}.film-frame,.player{width:min(100%,560px)}.story{gap:85px}.scene-copy h1{font-size:82px}.scene-copy.is-finale h1{font-size:72px}.scene-text{font-size:15px}.shop-link img{width:82px;height:82px}}
@media(max-width:1050px){.brand{width:235px}.brand-motto{font-size:22px}.location{font-size:16px;max-width:320px;line-height:1.5}.story{grid-template-columns:1.2fr 1fr;gap:35px}h1{font-size:57px;letter-spacing:-2.5px}.scene-copy.is-finale h1{font-size:49px}.scene-text{font-size:12px}.scene-count{margin-bottom:18px}.scene-copy{padding-top:20px;padding-bottom:28px}.story-kicker{font-size:6px;letter-spacing:1.2px}.afterword>span{font-size:8px}.player{gap:10px}.film-timeline{gap:4px;max-width:190px}}
@media(max-width:800px){.location{display:none}.story{gap:28px}h1{font-size:47px}.scene-copy.is-finale h1{font-size:39px}.scene-text{font-size:11px}.story-kicker{font-size:5px}.copy-bottom{font-size:9px}.shop-links{gap:45px}.shop-link img{width:64px;height:64px}}
@media(max-width:620px){header{height:77px;padding:0 5%;gap:12px}.brand{width:174px}.brand-motto{font-size:17px}main{width:90%;padding:20px 0 0;margin:auto}.story{display:flex;flex-direction:column;gap:0}.film-frame{width:min(78vw,290px)}.player{height:38px;width:100%;margin-top:5px;font-size:8px;gap:12px}.player>button{font-size:8px}.player #replay span{font-size:16px}.film-timeline{gap:4px;max-width:none}.story-copy{padding:13px 0 0;border-top:1px solid #eee;min-height:165px}.story-kicker{font-size:6px;letter-spacing:1.3px}.story-kicker i{font-size:17px}.scene-copy{padding:15px 0;min-height:128px;display:grid;grid-template-columns:1.2fr 1fr;align-content:start;align-items:center;gap:10px 16px}.scene-count{grid-column:1/-1;margin:0 0 2px;font-size:6px;gap:8px}.scene-count>span:first-child{font-size:10px}.scene-line{width:15px}h1{font-size:39px;letter-spacing:-1.9px;line-height:1.06;margin:0}.scene-text{font-size:10px;line-height:1.7}.scene-copy.is-finale h1{font-size:33px;line-height:1.35;letter-spacing:-.6px}.scene-copy.is-finale .scene-text{max-width:none}.copy-bottom{display:none}.shop-links{gap:25px;margin-top:5px;padding:11px 0}.shop-link{min-width:83px;gap:8px;font-size:9px}.shop-link img{width:58px;height:58px;border-radius:14px}.dolap img{border-radius:50%}.afterword{height:55px;gap:15px}.afterword p{font-size:10px;max-width:190px;line-height:1.6}.afterword>span{display:none}.afterword img{width:80px}footer{min-height:48px;padding:12px 5%;font-size:6px;gap:12px}.footer-motto{font-size:13px}footer>span:last-child{display:none}}
@media(max-width:380px){.brand{width:150px}.brand-motto{font-size:15px}.film-frame{width:min(78vw,270px)}.scene-copy{gap:10px 11px;min-height:122px}h1{font-size:35px}.scene-copy.is-finale h1{font-size:29px}.scene-text{font-size:9px}.story-copy{min-height:157px}.shop-links{gap:21px}.shop-link{min-width:80px;font-size:8px}.shop-link img{width:54px;height:54px}}
@media(min-width:621px) and (max-height:800px){header{height:77px}main{width:min(1030px,90%);padding-top:22px}.film-frame,.player{width:min(100%,405px)}.scene-copy h1{font-size:58px}.scene-copy.is-finale h1{font-size:50px}.shop-links{margin-top:7px;padding-block:8px}.shop-link img{width:62px;height:62px}.afterword{height:50px}.afterword img{width:83px}footer{min-height:45px;padding-block:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.shot{transform:none!important}}

/* Footer illustration and the two address placements. */
.afterword{height:48px;justify-content:center}.afterword p{max-width:none}.bottom-illustration{width:90%;margin:20px auto 28px;display:flex;justify-content:center;flex-shrink:0}.bottom-illustration img{display:block;width:min(385px,90%);height:auto;opacity:1}footer .footer-address{font-size:16px;line-height:1.5;color:#777}.location{line-height:1.5;color:#777;flex-shrink:0}.copy-bottom{justify-content:flex-start}
@media(min-width:621px) and (max-width:1050px){header{height:118px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:5px 24px;padding-top:15px;padding-bottom:14px}.brand{grid-column:1;grid-row:1}.brand-motto{grid-column:2;grid-row:1;justify-self:end}.location{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;max-width:none;width:100%;font-size:16px;line-height:1.4}.location i{display:none}}
@media(max-width:620px){header{height:auto;min-height:108px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:12px 8px;padding-top:18px;padding-bottom:14px}.brand{grid-column:1;grid-row:1}.brand-motto{grid-column:2;grid-row:1;justify-self:end}.location{grid-column:1/-1;grid-row:2;display:block;max-width:none;width:100%;font-size:16px;line-height:1.4;text-align:center;text-wrap:balance}.location i{display:none}footer .footer-address{font-size:12px;line-height:1.5;text-align:center}footer{justify-content:center}.bottom-illustration{margin-top:20px;margin-bottom:25px}.bottom-illustration img{width:min(340px,100%)}.afterword{height:45px}.scene-copy{align-content:center;min-height:115px}.story-copy{min-height:150px}}

/* Final footer composition. */
.afterword{height:68px}.afterword p{font-size:22px;line-height:1.6;text-align:center}
.site-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:28px 5% 24px}.site-footer .bottom-illustration{width:100%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0}.site-footer .bottom-illustration img{width:min(577.5px,100%);height:auto}.site-footer .footer-address{margin-top:18px;text-align:center;font-size:16px;line-height:1.6}.site-footer .footer-brand{margin:28px 0 0;text-align:center;font-size:12px;line-height:1.5;color:#888;letter-spacing:.8px}
@media(max-width:620px){.afterword{height:auto;min-height:68px;padding:13px 0}.afterword p{font-size:20px;max-width:none}.site-footer{padding-top:25px;padding-bottom:22px}.site-footer .footer-address{font-size:12px;margin-top:17px}.site-footer .footer-brand{font-size:11px;margin-top:25px}}

/* Cream page with a white story section. */
html,body,header,.site-footer{background:#f4f2e9}.story{background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(-29px -100vmax 0 -100vmax);isolation:isolate}
@media(max-width:620px){.story{clip-path:inset(-20px -100vmax 0 -100vmax)}}
@media(min-width:621px) and (max-height:800px){.story{clip-path:inset(-22px -100vmax 0 -100vmax)}}

/* Shared footer map: the same location on both pages. */
.visit-map{width:min(900px,100%);margin-top:28px;display:flex;flex-direction:column;align-items:center;gap:15px}.visit-map iframe{display:block;width:100%;height:320px;border:1px solid #d8d3c6;border-radius:8px;background:#e9e5da}.visit-map>a{font-size:13px;line-height:1.5;color:#655f52;padding:7px 0;border-bottom:1px solid #c9c2b2;text-align:center}.visit-map>a:hover{color:#1c1c1c;border-color:#1c1c1c}@media(max-width:620px){.visit-map{margin-top:24px;gap:12px}.visit-map iframe{height:270px;border-radius:6px}.visit-map>a{font-size:12px}}