:root{--paper:#f6f4ed;--white:#fdfcf7;--ink:#45483f;--muted:#73766b;--line:#d4d4c5;--sage:#dce0d3;--serif:'Cormorant Garamond','Shippori Mincho',Georgia,serif;--jp:'Noto Serif JP','Yu Mincho',serif;--display:'Hina Mincho','Shippori Mincho',serif;--sans:'Noto Sans JP',sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:110px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:2;overflow-wrap:anywhere}
a{color:inherit;text-decoration:none}
button,summary,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:2px solid #657655;outline-offset:7px}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,h4{font-weight:400}
h1,h2,h3,.serif{font-family:var(--jp)}
p+p{margin-top:1.5em}
::selection{background:#d9ddcb}
.skip{position:fixed;left:15px;top:-100px;z-index:100;background:var(--white);padding:10px}
.skip:focus{top:10px}
.site-header{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;max-width:1600px;margin:auto;padding:26px 5%;border-bottom:1px solid var(--line)}
.brand{font:500 26px/1 var(--serif);letter-spacing:.13em}
.brand span{display:block;font:10px/1.4 var(--sans);letter-spacing:.2em;margin-top:10px}
.site-header nav{display:flex;gap:42px}
.site-header nav a{font:17px/1.2 var(--serif);position:relative}
.site-header nav a span{display:block;font:11px/1.5 var(--sans);color:var(--muted);margin-top:5px;letter-spacing:.06em}
.site-header nav a:after{content:'';position:absolute;left:0;right:100%;height:1px;background:var(--ink);bottom:-7px;transition:right .35s}
.site-header nav a:hover:after{right:0}
.eyebrow{font:12px/1.6 var(--sans);letter-spacing:.17em;color:#626b59}
.prologue{max-width:1080px;margin:150px auto 140px;padding:0 40px}
.prologue-layout{display:grid;grid-template-columns:1fr 1.12fr;gap:80px;margin-top:38px}
.prologue h2{font-size:28px;line-height:2;letter-spacing:.09em}
.prologue-layout p{line-height:2.2}
.prologue-close{font-size:20px;line-height:2!important}
.collection{padding:90px 7% 40px;position:relative}
.collection-heading{display:flex;justify-content:space-between;align-items:end;gap:30px;max-width:1240px;margin:auto}
.collection h2{font:400 clamp(44px,5.4vw,79px)/1.2 var(--serif);margin-top:16px;letter-spacing:-.03em}
.collection h2 span{display:block;font:20px/1.8 var(--jp);letter-spacing:.08em;margin-top:16px}
.collection-heading>p{font-size:13px;line-height:2.2;margin-bottom:8px}
.collection-index{max-width:1240px;margin:62px auto 90px;border-top:1px solid #bdc5b4;padding:20px 0;border-bottom:1px solid #bdc5b4}
.collection-index>p{font:13px/1.6 var(--serif);letter-spacing:.12em}
.collection-index>p span{font:11px var(--sans);letter-spacing:.08em;margin-left:20px;color:var(--muted)}
.collection-index>div{display:grid;grid-template-columns:repeat(3,1fr);gap:0 32px;margin-top:15px}
.collection-index a{display:flex;align-items:center;gap:17px;font:20px/1.5 var(--serif);padding:12px 0;border-bottom:1px solid #d2d7c8;transition:color .3s}
.collection-index a:hover{color:#42633f}
.collection-index a>span{font-size:12px;color:var(--muted)}
.collection-index i{font:13px var(--sans);margin-left:auto}
.stories{max-width:1240px;margin:auto;display:grid;grid-template-columns:repeat(12,1fr);column-gap:6%;row-gap:100px;align-items:start}
.story{min-width:0;scroll-margin-top:35px}
.story-1{grid-column:1/9}
.story-2{grid-column:5/13;margin-top:12px}
.story-3{grid-column:1/7}
.story-4{grid-column:8/13;margin-top:155px}
.story-5{grid-column:2/11}
.story-6{grid-column:4/13}
.work-image{display:block;position:relative;background:#e7e6db;padding:12px;box-shadow:8px 15px 30px -22px #64705a;border-left:3px solid #acb29f;transition:transform 1s,box-shadow 1s}
.work-image:hover{transform:translateY(-5px);box-shadow:9px 24px 32px -24px #58694b}
.work-image img{width:100%;aspect-ratio:1500/844;object-fit:contain}
.image-visit{position:absolute;bottom:20px;right:20px;background:var(--white);padding:3px 12px;font-size:10px;letter-spacing:.12em}
.story-caption{display:grid;grid-template-columns:60px 1fr;gap:16px;margin-top:26px}
.volume{font:12px/2 var(--serif);letter-spacing:.08em;white-space:nowrap;border-top:1px solid #9da68e;padding-top:7px;margin-top:4px}
.meta{font-size:11px;letter-spacing:.1em;color:var(--muted)}
.story h3{font:400 clamp(26px,3.06vw,42px)/1.2 var(--serif);margin:8px 0 12px}
.story-line{font-family:var(--jp);font-size:15px;letter-spacing:.05em}
.story .story-description{margin-top:8px;border-top:1px solid var(--line)}
.story summary{cursor:pointer;list-style:none;font-size:13px;display:flex;justify-content:space-between;padding:13px 0;min-height:48px}
.story summary::-webkit-details-marker{display:none}
.story summary span{transition:transform .4s;font-size:17px}
.story details[open] summary span{transform:rotate(45deg)}
.story-description{padding:14px 0 0}
.story-description p{font-size:14px;line-height:2.1}
.story-description .keywords{font-size:12px;color:var(--muted)}
.text-link{display:inline-flex;gap:25px;justify-content:space-between;align-items:center;border-bottom:1px solid #9ca38f;padding:9px 0;font-size:13px;margin-top:20px;min-height:44px}
.text-link:hover{color:#45613d}
.collection-end{text-align:center;font:italic 30px var(--serif);margin:100px 0 45px;color:#7b8570}
.about{max-width:1160px;margin:130px auto 160px;padding:0 35px;display:grid;grid-template-columns:.86fr 1fr;gap:11%;align-items:center}
.about-image{position:relative}
.about-image img{aspect-ratio:4/5;object-fit:cover;border-radius:46% 46% 0 0;filter:saturate(.65)}
.about-image:before{content:'';position:absolute;inset:-13px 13px 35px -13px;border:1px solid #babfad;border-radius:46% 46% 0 0;z-index:-1}
.about-image>span{display:block;font-size:10px;letter-spacing:.18em;margin-top:20px}
.about h2{font-size:23px;margin:20px 0 28px;letter-spacing:.08em}
.about h2 span{display:block;font:italic 62px/1.2 var(--serif);letter-spacing:0;margin-top:10px}
.about h3{font-size:22px;margin:30px 0 22px;line-height:1.9}
.about-copy>p:not(.eyebrow){font-size:14px;line-height:2.15}
.craft{padding:90px 6% 110px;background:#e8e3dc}
.craft-heading{text-align:center}
.craft-heading h2{font-size:33px;letter-spacing:.14em;margin:23px 0 14px}
.craft-heading>p:last-child{font-size:14px}
.open-book{max-width:1160px;margin:65px auto 0;display:grid;grid-template-columns:1fr 1fr;box-shadow:0 15px 35px -25px #68745b;border:1px solid #d9dccf}
.book-page{padding:45px 9% 75px;position:relative;background:linear-gradient(90deg,#fcfbf4 92%,#eeeee4);border-radius:2px 0 0 2px}
.book-page+.book-page{background:linear-gradient(90deg,#e7e8dd,#fbfaf2 7%);border-left:1px solid #d8dacb;border-radius:0 2px 2px 0}
.page-label{font-size:10px;letter-spacing:.13em;border-bottom:1px solid var(--line);padding-bottom:22px}
.book-page h3{font-size:21px;line-height:1.8;margin:26px 0 20px}
.steps{padding:0;list-style:none;margin:25px 0}
.steps li{display:flex;gap:24px;margin:22px 0}
.steps h4{font:18px var(--jp);margin-bottom:8px}
.steps p,.book-page>p:not(.page-label),.service-note p{font-size:13px;line-height:2}
.service-label{font-size:13px;font-weight:500;margin:24px 0 10px;color:#607053}
.service-note{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}
.service-note p{font-size:13px}
.page-number{position:absolute;bottom:24px;left:0;right:0;text-align:center;font:13px var(--serif)}
.for-you{max-width:1100px;margin:100px auto 0;display:grid;grid-template-columns:1fr 1.2fr;gap:80px}
.for-you h3{font-size:24px;line-height:1.9;margin:20px 0}
.for-you p:not(.eyebrow){font-size:13px}
.for-you ul{list-style:none;margin:0;padding:0}
.for-you li{font-size:13px;line-height:1.9;padding:14px 0 14px 20px;border-bottom:1px solid #cbd1bf;position:relative}
.for-you li:before{content:'—';position:absolute;left:0;color:#7a876d}
.epilogue{text-align:center;padding:130px 24px 140px}
.epilogue h2{font-size:26px;line-height:1.9;letter-spacing:.09em;margin:30px 0}
.epilogue p{font-size:14px}
.epilogue .ending-quote{font-size:19px;margin-top:38px}
.contact{position:relative;isolation:isolate;text-align:center;padding:95px 24px 100px;overflow:hidden;background:#ece7e0}
.contact-arch{position:absolute;z-index:-1;inset:30px max(8%,calc((100% - 680px)/2)) -90px;border:1px solid #bfc7af;border-radius:999px 999px 0 0}
.contact-inner{max-width:780px;margin:auto}
.contact h2{font-size:clamp(30px,3.6vw,46px);line-height:1.8;letter-spacing:.12em;margin:28px 0}
.contact p{font-size:13px;line-height:2.15}
.contact .contact-lead{font:20px/1.8 var(--jp);margin-bottom:24px}
.contact-button{display:flex;align-items:center;justify-content:space-between;gap:30px;max-width:360px;margin:36px auto 0;background:#626f53;color:#fffef8;padding:17px 25px;font-size:13px;transition:background .4s,transform .4s}
.contact-button:hover{background:#4d5d3e;transform:translateY(-2px)}
.contact .contact-note{font-size:12px;max-width:360px;margin:12px auto 0;display:flex;justify-content:space-between;gap:16px}
footer{padding:35px 5%;display:flex;align-items:center;gap:30px;justify-content:space-between;font-size:11px;color:var(--muted)}
.footer-brand{font:25px var(--serif);letter-spacing:.1em;color:var(--ink)}
footer a{padding:8px 0}
body.motion .reveal{transition:opacity 1s,transform 1.2s}
body.motion .reveal.pending{opacity:0;transform:translateY(16px)}
@media(max-width:1000px){
.site-header nav{gap:25px}
.prologue-layout{gap:35px}
.collection{padding-left:5%;padding-right:5%}
.about{gap:6%}
.book-page{padding-left:7%;padding-right:7%}
.for-you{gap:40px}
footer{flex-wrap:wrap}
.story-3{grid-column:1/8}
.story-4{grid-column:6/13;margin-top:0}
.story-5{grid-column:1/10}
.story-6{grid-column:4/13}
}
@media(max-width:640px){
html{scroll-padding-top:20px}
.site-header{padding:21px 6% 17px;align-items:flex-start;gap:18px;flex-wrap:wrap}
.brand{font-size:24px}
.brand span{font-size:9px}
.site-header nav{width:100%;justify-content:space-between;gap:10px;margin-top:6px}
.site-header nav a{font-size:17px;padding:4px 0}
.site-header nav a span{font-size:10px}
.prologue{margin:80px auto 65px;padding:0 7%}
.prologue-layout{display:block;margin-top:25px}
.prologue h2{font-size:24px;line-height:1.9;margin-bottom:30px}
.prologue-layout p{font-size:14px;line-height:2.2}
.prologue-layout p br{display:none}
.prologue-layout .prologue-close{font-size:19px}
.prologue-close br{display:block!important}

.collection{padding:55px 6% 20px}
.collection-heading{display:block}
.collection h2{font-size:47px}
.collection h2 span{font-size:17px}
.collection-heading>p{margin-top:22px;font-size:13px}
.collection-index{margin:35px auto 45px;padding-top:17px}
.collection-index>div{grid-template-columns:1fr 1fr;column-gap:22px}
.collection-index a{font-size:17px;gap:8px;min-height:52px}
.collection-index a>span{font-size:11px}
.collection-index i{font-size:12px}
.collection-index>p span{font-size:10px;margin-left:12px}
.stories{display:block}
.story{margin:0 0 58px!important}
.work-image{padding:7px;border-left-width:2px;margin:0 -2%}
.image-visit{font-size:9px;bottom:12px;right:12px;padding:2px 8px}
.story-caption{grid-template-columns:43px 1fr;gap:12px;margin-top:20px}
.volume{font-size:11px}
.story h3{font-size:30px}
.story-line{font-size:14px}
.story-description p{font-size:14px}
.story .story-description{margin-top:8px}
.story summary{font-size:13px}
.collection-end{font-size:25px;margin:0 0 30px}
.about{display:block;margin:75px auto 80px;padding:0 7%}
.about-image{width:76%;margin:0 auto 50px}
.about h2{font-size:22px}
.about h2 span{font-size:55px}
.about h3{font-size:21px}
.about-copy>p:not(.eyebrow){font-size:15px}
.craft{padding:55px 5% 60px}
.craft-heading h2{font-size:26px;letter-spacing:.09em}
.craft-heading .eyebrow{font-size:10px}
.open-book{display:block;margin-top:36px}
.book-page,.book-page+.book-page{padding:30px 7% 60px;background:var(--white);border:0;border-radius:0}
.book-page+.book-page{border-top:1px solid #c8cebc}
.book-page h3{font-size:20px}
.steps p,.book-page>p:not(.page-label),.service-note p{font-size:14px}
.steps li{gap:22px;margin:26px 0}
.service-label{font-size:14px}
.service-note p{font-size:13px}
.page-label{font-size:10px}
.for-you{display:block;margin:55px 2% 0}
.for-you h3{font-size:23px}
.for-you ul{margin-top:24px}
.for-you li{font-size:14px}
.epilogue{padding:75px 7% 80px}
.epilogue h2{font-size:22px}
.epilogue p{font-size:13px}
.epilogue .ending-quote{font-size:18px;line-height:1.9}
.contact{padding:70px 7% 65px}
.contact-arch{inset:16px 4% -20px;border-radius:48% 48% 0 0}
.contact h2{font-size:28px;letter-spacing:.08em}
.contact .eyebrow{font-size:10px}
.contact p{font-size:13px}
.contact p br{display:none}
.contact .contact-lead{font-size:18px}
.contact-button{font-size:13px;padding:16px 18px}
.contact .contact-note{font-size:11px;gap:9px}
footer{display:grid;grid-template-columns:1fr 1fr;padding:25px 7%;gap:12px}
footer>span{grid-column:1/-1;grid-row:2}
footer>a:last-child{text-align:right}
footer .footer-brand{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*:before,*:after{animation:none!important;transition:none!important}
body.motion .reveal.pending{opacity:1;transform:none}
}
@media print{
.site-header nav,.contact-arch{display:none}
.story details>*{display:block}
.reveal{opacity:1!important;transform:none!important}
}
.story-description p,.about-copy>p:not(.eyebrow),.steps p,.book-page>p:not(.page-label),.for-you li,.for-you p:not(.eyebrow),.epilogue p,.contact p{font-size:13px}
.story-description .keywords,.contact .contact-note{font-size:.75rem}
.contact .eyebrow{font-size:.75rem}
.contact .contact-lead{font-size:1.24rem}
.epilogue .ending-quote{font-size:1.18rem}
@media(max-width:640px){
.contact .eyebrow{font-size:.625rem}
.contact .contact-note{font-size:.75rem;flex-wrap:wrap}
.epilogue .ending-quote{font-size:1.13rem}
}
body{font-family:var(--jp);font-weight:300;line-height:2.15}
.eyebrow,.meta,.page-label,.service-label,.site-header nav a span,.contact-button,.contact-note,.story summary,.text-link,.for-you li,.collection-index>p span{font-weight:300}
.service-label{font-family:var(--jp);font-weight:400}
.story-description p,.about-copy>p:not(.eyebrow),.steps p,.service-note p{line-height:2.2;letter-spacing:.025em}
.contact-button,.story summary,.text-link{font-family:var(--jp)}
.reading-shelf[hidden]{display:none}
.reading-shelf{max-width:1240px;margin:60px auto 20px}
.shelf-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:10px}
.shelf-topline>p:last-child{font-size:14px}
.shelf-stage{position:relative;height:400px;overflow:hidden;touch-action:pan-y;isolation:isolate}
.shelf-volume{position:absolute;top:28px;left:50%;width:60%;max-width:690px;padding:9px 9px 0;background:#fbfaf4;border:1px solid #c8cbbb;border-left:4px solid #9ba38d;color:var(--ink);box-shadow:0 18px 30px -26px #46503e;cursor:pointer;transform-origin:50% 120%;transition:transform .85s cubic-bezier(.2,.65,.25,1),opacity .65s,filter .65s;transform:translateX(-50%);text-align:left;font-family:var(--serif);opacity:0;pointer-events:none}
.shelf-volume[data-distance="0"]{z-index:4;opacity:1;pointer-events:auto;transform:translateX(-50%)}
.shelf-volume[data-distance="-1"]{z-index:3;opacity:.65;pointer-events:auto;transform:translateX(-108%) translateY(38px) rotate(-7deg) scale(.8);filter:saturate(.55)}
.shelf-volume[data-distance="1"]{z-index:3;opacity:.65;pointer-events:auto;transform:translateX(8%) translateY(38px) rotate(7deg) scale(.8);filter:saturate(.55)}
.shelf-volume[data-distance="-2"]{z-index:2;opacity:.25;pointer-events:auto;transform:translateX(-143%) translateY(74px) rotate(-12deg) scale(.65);filter:saturate(.4)}
.shelf-volume[data-distance="2"]{z-index:2;opacity:.25;pointer-events:auto;transform:translateX(43%) translateY(74px) rotate(12deg) scale(.65);filter:saturate(.4)}
.shelf-volume img{width:100%;aspect-ratio:1500/844;object-fit:contain}
.shelf-spine{display:flex;justify-content:space-between;gap:15px;padding:8px 8px 10px;font:11px/1.5 var(--sans);letter-spacing:.1em}
.shelf-spine>span{font:16px/1.2 var(--serif);letter-spacing:.03em}
.shelf-bottom{position:relative;z-index:5;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:20px;padding:24px 0 15px;border-top:1px solid #c0c7b5}
.shelf-arrows{display:flex;align-items:center;gap:18px}
.shelf-arrows button{font:18px var(--serif);border:1px solid #adb89e;background:transparent;color:var(--ink);border-radius:50%;width:44px;height:44px;cursor:pointer;transition:background .3s}
.shelf-arrows button:hover{background:#dce2d2}
.shelf-counter{font:13px var(--serif);white-space:nowrap;letter-spacing:.08em}
.selected-story{text-align:center}
.shelf-type{font:11px var(--sans);font-weight:300;letter-spacing:.1em;color:var(--muted)}
.selected-story .shelf-name{font:33px/1.2 var(--serif);margin-top:7px}
.shelf-open{justify-self:end;display:flex;gap:25px;align-items:center;min-height:48px;padding:8px 0;border:0;border-bottom:1px solid #8e9d7f;background:transparent;color:var(--ink);font:14px var(--jp);cursor:pointer}
.shelf-index-link{display:block;width:fit-content;margin:25px auto 0;font-size:13px;border-bottom:1px solid #bdc5b4;padding:8px}
.shelf-stage:focus-visible,.shelf-volume:focus-visible,.shelf-arrows button:focus-visible,.shelf-open:focus-visible,.reading-close:focus-visible{outline:2px solid #657655;outline-offset:3px}
.story-dialog{width:min(960px,94vw);max-height:90svh;max-height:90vh;padding:0;border:1px solid #c7cbbb;background:var(--paper);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.story-dialog::backdrop{background:rgba(47,53,42,.55)}
.reading-page{position:relative;padding:42px 6% 50px}
.reading-close{display:flex;align-items:center;gap:14px;margin-left:auto;margin-bottom:12px;min-height:44px;border:0;border-bottom:1px solid #b9c0ac;background:transparent;color:var(--ink);font:13px var(--jp);cursor:pointer}
.reading-close span{font:23px var(--serif)}
.reading-volume{margin:0 0 20px}
.reading-image{width:100%;height:auto;box-shadow:0 10px 22px -20px #445137}
.reading-copy{max-width:640px;margin:30px auto 0}
.reading-type{font:12px var(--sans);font-weight:300;color:var(--muted);letter-spacing:.1em}
.reading-copy h2{font:42px/1.2 var(--serif);margin:10px 0 23px}
.reading-description{font-size:15px;line-height:2.2}
.reading-keys{font-size:13px;color:var(--muted)}
.reading-copy .reading-link-note{font-size:12px;margin:10px 0 0;color:var(--muted)}
body.reading-open{overflow:hidden}
@media(min-width:1250px){
.shelf-stage{height:465px}
}
@media(max-width:850px){
.shelf-stage{height:340px}
.shelf-volume{width:69%}
.shelf-bottom{grid-template-columns:1fr 1fr}
.selected-story{grid-column:1/-1;grid-row:1}
.shelf-open{grid-column:2}
.shelf-arrows{grid-column:1}
.shelf-stage{height:clamp(255px,45vw,380px)}
}
@media(max-width:640px){
.reading-shelf{margin-top:30px}
.shelf-topline{display:block}
.shelf-topline>p:last-child{font-size:13px;margin-top:8px}
.shelf-stage{height:clamp(225px,60vw,340px);margin:0 -6.8%}
.shelf-volume{width:82%;top:30px;padding:5px 5px 0;border-left-width:3px}
.shelf-volume[data-distance="-1"]{transform:translateX(-124%) translateY(20px) rotate(-4deg) scale(.83)}
.shelf-volume[data-distance="1"]{transform:translateX(24%) translateY(20px) rotate(4deg) scale(.83)}
.shelf-volume[data-distance="-2"],.shelf-volume[data-distance="2"]{opacity:0;pointer-events:none}
.shelf-spine{font-size:9px;padding:7px 3px}
.shelf-spine>span{font-size:13px}
.shelf-bottom{gap:20px 10px;padding-top:20px}
.selected-story .shelf-name{font-size:30px}
.shelf-arrows{gap:10px}
.shelf-counter{font-size:12px}
.shelf-open{font-size:13px;gap:13px}
.shelf-index-link{font-size:13px;margin-top:15px}
.collection-index{margin-top:40px}
.reading-page{padding:20px 6% 32px}
.reading-copy h2{font-size:31px}
.story-dialog{width:94vw;max-height:92svh}
.reading-description{font-size:15px}
}
.open-book{position:relative;isolation:isolate;border:0;border-radius:4px 8px 8px 4px;overflow:visible;background:#c6c9b8;padding:3px 4px 8px;box-shadow:0 1px 0 #b7bba8,0 5px 0 -1px #eae9dc,0 6px 0 -1px #b9bdab,0 10px 0 -2px #eeeddf,0 11px 0 -2px #b6baa6,0 16px 0 -3px #8b957d,0 28px 35px -20px rgba(53,61,43,.3)}
.book-page{background:linear-gradient(90deg,#f6f3e8 0%,#fffdf4 8%,#faf8ed 83%,#efeee0 96%,#d8d9c9 100%);border-radius:3px 0 0 4px;border-top:1px solid #fffff8;border-bottom:1px solid #d0d0bd;box-shadow:inset 2px 0 3px rgba(88,80,54,.06)}
.book-page+.book-page{background:linear-gradient(90deg,#c9ccba 0%,#e9ebdc 2%,#faf8ed 8%,#fffdf4 90%,#f0eee1 100%);border-left:1px solid #b9bfa9;border-radius:0 4px 5px 0;box-shadow:inset -2px 0 3px rgba(88,80,54,.08)}
.book-page:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:.16;background-image:url("assets/paper-grain.svg");mix-blend-mode:multiply}
.page-label{position:relative;border-bottom-color:#c9cbbb}
.page-number{color:#747962;font-style:italic;letter-spacing:.16em}
@media(max-width:640px){
.open-book{padding:3px 4px 7px;border-radius:3px;box-shadow:0 3px 0 -1px #eae9dc,0 5px 0 -1px #b9bdab,0 8px 0 -2px #eeeddf,0 10px 0 -2px #8b957d,0 22px 30px -22px rgba(53,61,43,.35)}
.book-page{background:linear-gradient(90deg,#e9e9dc,#fffdf4 6%,#faf8ed 93%,#eeecdf);border-radius:2px 2px 0 0;border-bottom:0}
.book-page+.book-page{background:linear-gradient(90deg,#e9e9dc,#fffdf4 6%,#faf8ed 93%,#eeecdf);border-left:0;border-top:1px solid #ced0bd;border-radius:0 0 3px 3px;box-shadow:inset 0 8px 12px -12px #7e896c}
.book-page:after{opacity:.12}
}
body{font-family:var(--jp);font-weight:300;font-synthesis:none}
.prologue h2,.craft-heading h2,.contact h2{font-family:var(--display);font-weight:400;letter-spacing:.04em}
.prologue-layout p,.story-line,.about-copy>p:not(.eyebrow),.reading-description{letter-spacing:.055em}
.ink-appear{opacity:0;transform:translateY(13px);filter:blur(3px);transition:opacity 1.65s ease var(--ink-delay,0ms),transform 1.9s cubic-bezier(.16,1,.3,1) var(--ink-delay,0ms),filter 1.65s ease var(--ink-delay,0ms)}
.ink-appear.ink-visible{opacity:1;transform:translateY(0);filter:blur(0)}
.ink-appear:focus-within{opacity:1;transform:none;filter:none;transition:none}
.book-page .ink-appear{transition-duration:.9s,1.1s,.9s}
@media(max-width:640px){
.ink-appear{transform:translateY(9px);filter:blur(2px);transition-duration:1.35s,1.6s,1.35s}
.ink-appear.ink-visible{transform:translateY(0);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
.ink-appear{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
}
@media print{
.ink-appear{opacity:1!important;transform:none!important;filter:none!important}
}
.collection{background-color:var(--paper);background-color:color-mix(in srgb,var(--story-atmosphere,#dfe8d6) 90%,var(--paper));background-image:linear-gradient(180deg,var(--paper) 0px,rgba(246,244,237,.85) 160px,transparent 560px,transparent calc(100% - 240px),var(--paper) 100%);transition:background-color 1.8s ease}
@media(prefers-reduced-motion:reduce){
.collection{transition:none}
}
.stories{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8%;row-gap:80px}
.stories .story{grid-column:auto;margin-top:0}
.stories .story:nth-child(even){margin-top:100px}
@media(max-width:640px){
.stories{display:block}
.stories .story,.stories .story:nth-child(even){margin-top:0}
}
.service-note p,.about-copy>p.about-aside:not(.eyebrow){font-size:11px;line-height:2;letter-spacing:.02em}
@media(max-width:640px){
html,body{max-width:100%;overflow-x:hidden}
@supports(overflow:clip){
html,body{overflow-x:clip}
}
main{min-width:0;max-width:100%}
.collection,.craft,.contact{max-width:100%}
.shelf-stage{overflow:hidden;touch-action:pan-y}
.open-book,.book-page,.about-copy,.story-caption>div{min-width:0}
}
.steps li{
  display:grid;
  grid-template-columns:2.15rem minmax(0,1fr);
  column-gap:.55rem;
  align-items:start;
}
.steps li>span{
  padding-top:.05em;
  font-family:'Pinyon Script',cursive;
  font-size:1.58rem;
  font-weight:400;
  font-style:normal;
  line-height:1;
  letter-spacing:-.03em;
  color:#778269;
  font-variant-numeric:normal;
}
.steps h4{line-height:1.2}
@media(max-width:640px){
.steps li{grid-template-columns:1.9rem minmax(0,1fr);column-gap:.4rem}
.steps li>span{font-size:1.4rem;padding-top:.08em}
}
@media(max-width:640px){
.contact-arch{border-radius:50% 50% 0 0 / 170px 170px 0 0}
}

/* FINAL PROLOGUE — the selected desk scene. */
.site-final .prologue{
  position:relative;
  isolation:isolate;
  max-width:none;
  padding-left:max(7%,calc((100% - 1000px)/2));
  padding-right:max(7%,calc((100% - 1000px)/2));
}
.site-final .prologue-atmosphere{
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  background-image:
    linear-gradient(90deg,rgba(246,244,237,.46) 0%,rgba(246,244,237,.58) 35%,rgba(246,244,237,.94) 55%,rgba(246,244,237,.98) 100%),
    linear-gradient(180deg,rgba(246,244,237,.98) 0%,rgba(246,244,237,.88) 22%,transparent 61%,rgba(246,244,237,.18) 90%,var(--paper) 100%),
    url('assets/library-desk-white.png');
  background-size:cover;
  background-position:center;
}
.site-final .prologue-layout h2{text-shadow:0 1px 18px rgba(255,253,243,.8)}
@media(min-width:641px) and (max-width:1100px){
  .site-final .prologue-atmosphere{background-position:18% center}
}

/* EPILOGUE — the window-side light from the former A study. */
.site-final .epilogue{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 18% 42%,rgba(255,254,247,.38),transparent 48%),
    linear-gradient(112deg,rgba(236,237,224,.62),rgba(248,246,238,.93) 48%,var(--paper) 82%);
}
.site-final .epilogue:before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(246,244,237,.22),rgba(246,244,237,.82) 52%,rgba(246,244,237,.96)),
    url('assets/window-leaves.svg') left 42% / min(48vw,620px) auto no-repeat;
  opacity:.45;
  filter:saturate(.7);
}
@media(max-width:640px){
  .site-final .prologue{padding-left:7%;padding-right:7%}
  .site-final .prologue-atmosphere{
    background-image:linear-gradient(145deg,#efeee1,#fbf8ef 45%,var(--paper));
  }
  .site-final .prologue-layout h2:after{
    content:'';
    display:block;
    height:180px;
    margin-top:24px;
    background:linear-gradient(rgba(246,244,237,.4),rgba(246,244,237,.4)),url('assets/library-desk-white.png') 24% 73% / cover;
    mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent);
  }
  .site-final .epilogue:before{
    background:linear-gradient(180deg,rgba(246,244,237,.42),rgba(246,244,237,.88)),url('assets/window-leaves.svg') -80px 55% / 86vw auto no-repeat;
    opacity:.32;
  }
}
.story-caption .keywords{font-size:.75rem;line-height:2;color:var(--muted);letter-spacing:.025em;margin-top:14px}
@media(max-width:640px){
html{font-size:15px}
body{font-size:13px}
.prologue h2{font-size:22px}
.prologue-layout p{font-size:13px}
.prologue-layout .prologue-close{font-size:18px}
.collection h2{font-size:43px}
.collection h2 span{font-size:17px}
.collection-heading>p,.shelf-topline>p:last-child{font-size:13px}
.collection-index a{font-size:16px}
.selected-story .shelf-name,.story h3{font-size:28px}
.story-line{font-size:13px}
.story summary,.text-link,.shelf-open,.shelf-index-link{font-size:13px}
.about h2{font-size:21px}
.about h2 span{font-size:51px}
.about h3{font-size:20px}
.craft-heading h2{font-size:25px}
.craft-heading>p:last-child{font-size:13px}
.book-page h3{font-size:19px}
.steps h4{font-size:17px}
.service-label{font-size:13px}
.for-you h3{font-size:21px}
.epilogue h2{font-size:21px}
.contact h2{font-size:26px}
.contact-button{font-size:13px}
.reading-copy h2{font-size:29px}
.reading-description{font-size:14px}
.service-note p,.about-copy>p.about-aside:not(.eyebrow){font-size:11px}
.story-caption .keywords,.contact .contact-note{font-size:12px}
}
body{font-size:13px}
.prologue h2{font-size:24px}
.prologue-close{font-size:18px}
.collection h2{font-size:clamp(37px,4.5vw,64px)}
.collection h2 span{font-size:18px}
.story h3{font-size:clamp(23px,2.5vw,35px)}
.story-line{font-size:14px}
.about h2{font-size:19px}
.about h2 span{font-size:50px}
.about h3{font-size:19px}
.craft-heading h2{font-size:27px}
.book-page h3{font-size:19px}
.steps h4{font-size:17px}
.for-you h3{font-size:19px}
.epilogue h2{font-size:22px}
.contact h2{font-size:clamp(25px,3vw,36px)}
.reading-copy h2{font-size:38px}
@media(max-width:640px){
html,body{font-size:13px}
.prologue h2{font-size:19px}
.prologue-layout p{font-size:13px}
.prologue-layout .prologue-close{font-size:17px}
.collection h2{font-size:36px}
.collection h2 span{font-size:16px}
.collection-heading>p,.shelf-topline>p:last-child{font-size:12px}
.collection-index a{font-size:15px}
.selected-story .shelf-name,.story h3{font-size:23px}
.story-line{font-size:13px}
.about h2{font-size:17px}
.about h2 span{font-size:42px}
.about h3{font-size:17px}
.craft-heading h2{font-size:21px}
.craft-heading>p:last-child{font-size:13px}
.book-page h3{font-size:17px}
.steps h4{font-size:16px}
.service-label{font-size:13px}
.for-you h3{font-size:18px}
.epilogue h2{font-size:18px}
.contact h2{font-size:22px}
.contact-button{font-size:12px}
.reading-copy h2{font-size:26px}
.reading-description{font-size:13px}
}
.for-you li{padding-left:1.9rem}

/* Give the Prologue enough presence on wide desktop displays. */
@media(min-width:1500px){
  .site-final .prologue{
    padding-left:max(8%,calc((100% - 1180px)/2));
    padding-right:max(8%,calc((100% - 1180px)/2));
  }
  .site-final .prologue-layout{
    grid-template-columns:1fr 1.08fr;
    gap:104px;
    margin-top:46px;
  }
  .site-final .prologue .eyebrow{font-size:13px}
  .site-final .prologue h2{font-size:30px;line-height:2.05}
  .site-final .prologue-layout p{font-size:15px;line-height:2.25}
  .site-final .prologue-layout .prologue-close{font-size:21px}
}

/* GREIGE DETAILS — frames, book edges and mockup shadows. */
:root{
  --greige-line:#c8c0b5;
  --greige-mid:#aaa095;
  --greige-deep:#82786e;
  --greige-shadow:rgba(83,72,63,.24);
}
.work-image{
  background:#ebe7e0;
  border-left-color:#b8afa5;
  box-shadow:8px 15px 30px -22px var(--greige-shadow);
}
.volume,.text-link,.collection-index,.collection-index a,.shelf-bottom,
.shelf-open,.shelf-index-link,.reading-close,.for-you li{
  border-color:var(--greige-line);
}
.shelf-volume{
  border-color:var(--greige-line);
  border-left-color:var(--greige-mid);
  box-shadow:0 18px 30px -26px var(--greige-shadow);
}
.shelf-arrows button{border-color:#b8aea3}
.shelf-arrows button:hover{background:#e4ded6}
.story-dialog{border-color:var(--greige-line)}
.reading-image{box-shadow:0 10px 22px -20px var(--greige-shadow)}
.about-image:before,.contact-arch{border-color:var(--greige-line)}
.open-book{
  background:#c9c0b5;
  box-shadow:0 1px 0 #b7ada2,0 5px 0 -1px #ece8e1,0 6px 0 -1px #bbb1a6,0 10px 0 -2px #efebe4,0 11px 0 -2px #b7ada2,0 16px 0 -3px var(--greige-deep),0 28px 35px -20px var(--greige-shadow);
}
.book-page{
  background:linear-gradient(90deg,#f3eee6 0%,#fffdf7 8%,#faf7ef 83%,#eee8e0 96%,#d5cdc3 100%);
  border-bottom-color:#cec5bb;
}
.book-page+.book-page{
  background:linear-gradient(90deg,#cbc2b8 0%,#e9e3dc 2%,#faf7ef 8%,#fffdf7 90%,#eee8e0 100%);
  border-left-color:#bbb1a6;
}
.page-label{border-bottom-color:var(--greige-line)}
.page-number,.steps li>span,.service-label,.for-you li:before{color:var(--greige-deep)}
@media(max-width:640px){
  .open-book{box-shadow:0 3px 0 -1px #ece8e1,0 5px 0 -1px #bbb1a6,0 8px 0 -2px #efebe4,0 10px 0 -2px var(--greige-deep),0 22px 30px -22px var(--greige-shadow)}
  .book-page,.book-page+.book-page{background:linear-gradient(90deg,#ebe5dd,#fffdf7 6%,#faf7ef 93%,#eee8e0)}
  .book-page+.book-page{border-top-color:var(--greige-line)}
}

/* GREIGE ACCENTS — editorial labels, closing line and contact actions. */
::selection{background:#ddd5cc}
.eyebrow,.collection-end{color:var(--greige-deep)}
.collection-index a:hover{color:#6f665d}
.enter{border-bottom-color:var(--greige-mid)}
.library-title{color:#625b54}
.contact-arch{border-color:#c8beb3}
.contact-button{background:#82786e}
.contact-button:hover{background:#6d645c}
a:focus-visible,summary:focus-visible,
.shelf-stage:focus-visible,.shelf-volume:focus-visible,.shelf-arrows button:focus-visible,
.shelf-open:focus-visible,.reading-close:focus-visible{outline-color:#82786e}
.for-you li:before{
  content:'📖';
  left:0;
  top:calc(14px + .4em);
  font-family:'Apple Color Emoji','Segoe UI Emoji',sans-serif;
  font-size:1.05em;
  line-height:1;
  filter:grayscale(1) sepia(.22);
  opacity:.72;
}

/* HERO — BASE: readable document flow is the no-JavaScript default. */
.hero-turn-stage{position:relative}
.hero-turn-viewport{position:relative}
.hero-page{position:relative}
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;min-height:0;height:calc(100svh - var(--header-height,107px));margin:0;background:var(--paper);overflow:hidden}
.hero-copy{position:relative;flex-shrink:0;padding:clamp(20px,calc((100svh - 600px)*.4),150px) 0 0 9%;max-width:680px}
.hero h1{font:200 clamp(26px,2.7vw,41px)/1.9 var(--jp);letter-spacing:.12em;margin:30px 0 24px;color:#50564b}
.hero-intro{font:300 14px/2.25 var(--jp);letter-spacing:.055em}
.enter{display:inline-flex;align-items:center;gap:54px;margin-top:35px;border-bottom:1px solid #949c87;padding:8px 0;font-size:13px}
.enter span{font-size:20px;transition:transform .4s}
.enter:hover span{transform:translateY(5px)}
.hero-bottom{position:relative;flex-shrink:0;margin:20px 8% clamp(48px,7svh,80px) 6.5%;display:flex;align-items:flex-end;justify-content:space-between}
.library-title{font:400 clamp(53px,6.75vw,99px)/1 var(--serif);letter-spacing:-.05em;color:#545e4c;text-shadow:1px 1px 30px rgba(246,244,237,.55)}
.library-title em{font-weight:400}
.hero-folio{font-size:12px;letter-spacing:.1em;line-height:1.8;margin-bottom:9px;background:var(--paper);padding:10px 16px}
.side-note{position:absolute;right:1.1%;top:44%;writing-mode:vertical-rl;font-size:10px;letter-spacing:.22em;color:var(--muted)}
/* The opening words settle into the photograph before the reader turns the leaf. */
.hero .ink-appear{--hero-ink-rise:18px;transition:none}
.hero .ink-appear.ink-visible{animation:hero-ink-arrive 2.2s cubic-bezier(.2,.65,.25,1) var(--ink-delay,0ms) both}
.hero .ink-appear:focus-within{animation:none;opacity:1;transform:none;filter:none}
@keyframes hero-ink-arrive{
  0%{opacity:0;transform:translateY(var(--hero-ink-rise));filter:blur(5px)}
  45%{opacity:.65;filter:blur(1.2px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* HERO VISUAL — full library and its quiet arched window on wide screens. */
.hero-art{position:absolute;z-index:-2;inset:0;background:#d9dacd url('assets/library.png') center 48%/cover;filter:saturate(.58) brightness(1.14)}
.hero:before{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(246,244,237,.9) 0%,rgba(246,244,237,.68) 30%,rgba(246,244,237,.06) 58%,rgba(246,244,237,.015) 100%),linear-gradient(0deg,rgba(246,244,237,.18),transparent 43%)}
.hero-outline{position:absolute;z-index:-1;top:3.5%;right:3.8%;width:61%;height:90%;border:1px solid rgba(225,225,208,.76);border-radius:49% 49% 2px 2px / 42% 42% 2px 2px;box-shadow:0 0 0 100vmax rgba(246,244,237,.18),inset 0 0 52px rgba(255,255,241,.035);pointer-events:none}

/* PAGE TURN — only enabled after measurement; no wheel/touch interception. */
.hero-turn-stage.turn-enabled{height:var(--stage-height);overflow:clip;overflow-clip-margin:0}
.turn-enabled .hero-turn-viewport{position:sticky;top:var(--pin-top);min-height:var(--page-height);perspective:2400px;perspective-origin:45% 50%}
.turn-enabled .hero-page{position:absolute;z-index:2;inset:0 0 auto;height:var(--page-height);transform-style:preserve-3d;transform-origin:35% 50%;transform:translateX(var(--page-shift,0%)) rotateY(var(--page-angle,0deg));will-change:transform}
.turn-enabled .hero-page-front{height:100%;max-height:none;min-height:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(.5px);border-radius:0 var(--curl,0px) var(--curl,0px) 0 / 0 48% 48% 0}
.hero-page-back{display:none}
.turn-enabled .hero-page-back{display:block;position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg) translateZ(.5px);border-radius:var(--curl,0px) 0 0 var(--curl,0px) / 48% 0 0 48%;background-color:#f4efe2;background-image:url('assets/paper-grain.svg'),linear-gradient(90deg,#e3dccb 0%,#faf6ea 4%,#f5f0e4 32%,#eeeadc 76%,#faf7ec 100%);background-size:145px 145px,100% 100%;box-shadow:inset 1px 0 1px #fffdf2,0 5px 20px rgba(69,58,37,.07);clip-path:inset(0 30% 0 0)}
.turn-enabled .hero-page-front:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--turn-light,0);background:linear-gradient(90deg,transparent 30%,rgba(82,68,43,.09) var(--fold-position,85%),rgba(255,253,240,.48) calc(var(--fold-position,85%) + 3%),rgba(84,69,42,.13) 100%);box-shadow:inset -1px 0 rgba(255,255,242,.8)}
.turn-enabled .prologue{position:relative;z-index:0;margin:0 auto;padding-top:var(--underlay-pad);padding-bottom:70px;min-height:var(--page-height);opacity:1;transform:none}
.turn-enabled .prologue:after{content:'';position:absolute;pointer-events:none;inset:0;opacity:var(--shadow-strength,0);background:linear-gradient(90deg,transparent,rgba(65,53,34,.13) var(--shadow-position,80%),transparent calc(var(--shadow-position,80%) + 12%))}
.turn-enabled .prologue .ink-appear{opacity:1;transform:none;filter:none}
.turn-enabled .hero-page.is-turned{visibility:hidden}

/* RESPONSIVE — keep the phone's arch and allow all copy to scroll into view first. */
@media(min-width:641px) and (max-width:1000px){
 .hero-copy{padding-left:6%}
}
@media(min-width:641px) and (max-height:800px){
 .hero h1{font-size:clamp(25px,4.14svh,32px);line-height:1.65;margin:18px 0}
 .hero-intro{font-size:13px;line-height:2}
 .hero .enter{margin-top:16px}
 .hero .library-title{font-size:clamp(42px,8.1svh,63px)}
}
@media(max-width:640px){
 .hero{display:block;height:auto;min-height:850px;padding:325px 0 15px;max-height:none}
 .hero-art{inset:24px auto auto 20%;width:74%;height:400px;border-radius:49% 49% 0 0;background-position:57% center}
 .hero:before{display:none}
 .hero-outline{top:13px;left:17%;right:auto;width:80%;height:424px;border:1px solid #b8bdac;border-radius:49% 49% 0 0;box-shadow:none}
 .side-note{right:auto;left:7%;top:110px;font-size:9px}
 .hero-copy{padding:65px 7% 0;max-width:none}
 .hero-copy:before{content:'';position:absolute;z-index:-1;inset:8px -8px -25px;background:linear-gradient(0deg,var(--paper) 76%,rgba(246,244,237,0))}
 .hero .eyebrow{font-size:10px}
 .hero h1{font-size:clamp(21px,5.85vw,27px);line-height:1.8;letter-spacing:.07em;margin:22px 0}
 .hero-intro{font-size:13px;line-height:2.1}
 .enter{margin-top:19px;gap:45px}
 .hero-bottom{position:relative;inset:auto;display:block;margin:25px 7% 0}
 .library-title{font-size:clamp(41px,11.25vw,65px)}
 .hero-folio{display:none}
 .hero .ink-appear{--hero-ink-rise:12px}
 .turn-enabled .hero-turn-viewport{perspective:1500px}
 .turn-enabled .hero-page-front{min-height:850px}
}

/* REDUCED MOTION / PRINT — ordinary Hero then Prologue, even during preference changes. */
@media(prefers-reduced-motion:reduce),print{
 .hero-turn-stage.turn-enabled{height:auto;overflow:visible}
 .turn-enabled .hero-turn-viewport{position:relative;top:auto;min-height:0;perspective:none}
 .turn-enabled .hero-page{position:relative;height:auto;transform:none;will-change:auto;visibility:visible}
 .turn-enabled .hero-page-front{transform:none;height:auto;min-height:780px}
 .hero-page-back,.hero-page-front:after,.turn-enabled .prologue:after{display:none}
 .turn-enabled .prologue{min-height:0;margin:80px auto 65px;padding:0 7%}
}
@media print{
 .hero-art,.hero-outline{display:none}
 .hero,.turn-enabled .hero-page-front{height:auto;min-height:0;padding:0}
 .hero-copy{padding:20px}
 .hero-bottom{position:static}
}