:root{color-scheme:light;--pine:#183b32;--deep:#102a24;--paper:#f4efe4;--sand:#ded0b7;--ink:#21342d;--line:#c5bda9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans JP',sans-serif}a{color:inherit}.skip{position:absolute;left:1rem;top:-5rem;z-index:100;background:#fff;padding:.7rem 1rem}.skip:focus{top:1rem}.fiction{margin:0;padding:.5rem 4vw;background:var(--deep);color:#f5eee0;text-align:center;font-size:.68rem;line-height:1.65}.header{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:1rem 4vw;background:var(--paper)}.brand{text-decoration:none;font-family:'Noto Serif JP',serif;font-size:1.4rem;font-weight:700;white-space:nowrap}.brand small{display:block;font:600 .55rem/1.5 'DM Sans',sans-serif;letter-spacing:.19em;color:#60736b}.header nav{display:flex;flex-wrap:wrap;gap:1.4rem;font-size:.82rem}.header nav a{text-decoration:none;border-bottom:1px solid transparent}.header nav a:hover,.header nav a:focus-visible{border-color:currentColor}.hero{position:relative;isolation:isolate;background:var(--pine)}.hero>img{display:block;width:100%;height:clamp(660px,64vw,900px);object-fit:cover;object-position:center 52%}.hero:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(5,21,17,.45));pointer-events:none}.hero-copy{position:absolute;z-index:1;left:5vw;bottom:4.5vw;max-width:580px;padding:2.5rem 3rem;background:rgba(15,47,39,.91);color:#fffaf0;box-shadow:0 22px 70px #11251b45}.serial,.hero-tag{font:700 .66rem/1.5 'DM Sans',sans-serif;letter-spacing:.19em}.serial{margin:0 0 1.2rem;color:#b9d0bd}.category{display:inline-block;margin:0 0 .85rem;padding:.35rem .7rem;border:1px solid #ddd4ba;font-size:.78rem;letter-spacing:.09em}.hero h1,.lounge h2,.sample h2{font-family:'Noto Serif JP',serif;font-weight:600;letter-spacing:.07em;line-height:1.38}.hero h1{font-size:clamp(2.8rem,4.2vw,4.4rem);margin:.1rem 0 1.15rem}.hero-copy>p:not(.serial):not(.category){max-width:32em;font-size:.86rem;line-height:1.9}.hero-copy a,.lounge-heading a,.sample a{display:inline-flex;justify-content:space-between;align-items:center;min-width:190px;gap:1.5rem;padding:.85rem 0;border-bottom:1px solid currentColor;text-decoration:none;font-size:.83rem;font-weight:700}.hero-copy a:hover,.lounge-heading a:hover,.sample a:hover{opacity:.67}.hero-tag{position:absolute;right:4vw;bottom:4.5vw;z-index:1;color:#fff}.passage{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;max-width:1300px;margin:auto;padding:6rem 5vw;text-align:center}.passage span{font:700 .65rem 'DM Sans',sans-serif;letter-spacing:.2em;color:#6c7f70}.passage span:first-child{text-align:right}.passage span:last-child{text-align:left}.passage p{margin:0;font:600 clamp(1.55rem,2.6vw,2.5rem)/1.6 'Noto Serif JP',serif;letter-spacing:.11em}.lounge{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.3fr);align-items:center;gap:5vw;padding:3rem 5vw 8rem;max-width:1500px;margin:auto}.lounge-heading{max-width:410px}.lounge-heading .serial{color:#778879}.lounge h2{font-size:clamp(2.3rem,3.3vw,3.8rem);margin:0 0 1.4rem}.lounge-heading>p:not(.serial){font-size:.9rem;line-height:2}.lounge-heading a{margin-top:1.4rem;color:var(--pine)}.lounge figure{margin:0}.lounge img{display:block;width:100%;height:auto;max-height:760px;object-fit:cover;box-shadow:26px 26px 0 #ddd5c4}.lounge figcaption{padding:1.4rem 0 0;font:700 .65rem 'DM Sans',sans-serif;letter-spacing:.18em;color:#737e72}.sample{display:grid;grid-template-columns:1fr 2fr;gap:3rem;padding:6rem 5vw;background:var(--pine);color:#f5efe3}.sample .serial{color:#b9d0bd}.sample h2{font-size:clamp(1.8rem,3vw,3rem);margin:0 0 1rem}.sample div{max-width:700px}.sample div p{font-size:.85rem;line-height:2}footer{display:flex;justify-content:space-between;gap:1rem;padding:1.5rem 5vw;background:var(--deep);color:#d8d6c9;font-size:.69rem}footer a{text-decoration:none}@media(max-width:900px) and (min-width:761px){.lounge{display:block}.lounge-heading{max-width:670px;margin-bottom:3rem}.lounge h2{font-size:3rem}}@media(max-width:760px){.fiction{text-align:left;padding:.5rem 5vw;font-size:.61rem}.header{padding:1rem 5vw;align-items:flex-start;flex-direction:column;gap:.75rem}.header nav{gap:1rem;font-size:.75rem}.hero>img{height:auto;aspect-ratio:3/2;object-fit:cover}.hero:after{display:none}.hero-copy{position:static;max-width:none;padding:2.2rem 5vw 2.6rem;box-shadow:none;background:var(--pine)}.hero h1{font-size:clamp(2.5rem,9vw,4.5rem)}.hero-tag{top:1rem;right:5vw;bottom:auto;padding:.3rem .55rem;background:#173c318c;font-size:.55rem}.passage{padding:3.5rem 5vw;grid-template-columns:1fr auto 1fr;gap:.6rem}.passage span{font-size:.52rem}.passage p{font-size:clamp(1rem,4vw,1.5rem)}.lounge{display:block;padding:1rem 5vw 5rem}.lounge-heading{max-width:none;margin:0 0 2.5rem}.lounge h2{font-size:clamp(2rem,7vw,3rem)}.lounge img{box-shadow:12px 12px 0 #ddd5c4}.sample{display:block;padding:4rem 5vw}.sample .serial{margin-bottom:2rem}footer{flex-wrap:wrap}}@media(max-width:390px){.passage{grid-template-columns:1fr}.passage span{text-align:center!important}.passage p{order:0}.passage span:first-child{order:-1}.passage span:last-child{order:1}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* A pale entrance placard names the place while the timber house stays visible. */
.hero-copy{top:4vw;bottom:auto;max-width:none;width:min(52vw,680px);padding:2rem 2.6rem;background:rgba(248,244,232,.95);color:var(--deep);box-shadow:none}
.hero-copy .serial{color:#557064}
.hero-copy .category{border-color:#8d9a87;margin-bottom:.7rem}
.hero h1{font-size:clamp(3rem,5vw,5rem);line-height:1.2;letter-spacing:-.035em;margin:0 0 1rem;white-space:nowrap}
.hero-deck{font:600 clamp(1.35rem,2vw,2rem)/1.45 'Noto Serif JP',serif;letter-spacing:.06em;margin:0 0 .9rem;text-align:right}
.hero-copy>p:not(.serial):not(.category):not(.hero-deck){font-size:.75rem;margin:.5rem 0}
@media(max-width:760px){.hero-copy{position:static;width:auto;padding:1.7rem 5vw 2rem;background:var(--paper)}.hero h1{font-size:clamp(2.45rem,9.5vw,3.9rem)}.hero-deck{font-size:1.25rem}.hero-tag{top:1rem}}
@media(max-width:390px){.hero h1{font-size:2.45rem}}