:root{--cloth:#65734f;--paper:#f5eedc;--ink:#343a2e;--mustard:#b39856;--brick:#975946;--k:1;--t:.85s;
  --story:"UD Digi Kyokasho N-R","UD Digi Kyokasho NK-R","Yu Kyokasho","YuKyokasho Yoko","YuKyokasho","Klee","Yu Mincho","Hiragino Mincho ProN",serif;
  --body:"Yu Gothic Medium","Yu Gothic",Meiryo,"Hiragino Sans","Hiragino Kaku Gothic ProN",sans-serif}
*{box-sizing:border-box}
html{background:var(--cloth)}
body{margin:0;color:var(--ink);font:18px/1.85 var(--body);line-break:strict;-webkit-text-size-adjust:100%;background:var(--cloth)}
h1,h2,h3,p,dl,dd{margin:0;font-weight:400}
img{display:block;max-width:100%;height:auto}
p,dd{word-break:auto-phrase;overflow-wrap:break-word}
h1 span,h2 span{display:inline-block}
.skip{position:absolute;left:-999px}
.skip:focus{left:8px;top:8px;z-index:99;background:var(--paper);padding:8px 12px}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 4%;min-height:60px;color:#f7f0dc}
.brand{font:22px/1 var(--story);letter-spacing:.12em;color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:10px;min-height:44px}
nav a{color:#f7f0dc;font:16px/1 var(--story);letter-spacing:.08em;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px}
nav a[aria-current]{text-decoration:underline;text-underline-offset:7px}
.foot,.count{display:none}

.book{max-width:1180px;margin:0 auto;padding:8px 14px 40px}
.spread{position:relative;display:grid;grid-template-columns:1fr 1fr;background:var(--paper);margin:0 0 30px;box-shadow:0 3px 0 #e0d5b8,0 7px 0 #ede3c9,0 10px 0 #c2b58d,0 18px 24px #2f392950;border-radius:2px 3px 9px 5px}
.pg{position:relative;overflow:hidden;padding:44px 48px;display:flex;flex-direction:column;justify-content:center;min-height:480px}
.sc+.sc{margin-top:22px}
.story .pg{padding:0;justify-content:flex-start}
.art{position:absolute;top:0;left:0;width:200%;max-width:none;height:100%;object-fit:cover}
.pg.r .art{left:-100%}
.copy{position:relative;z-index:2;padding:52px 0 40px 56px;font-family:var(--story)}
.copy::before{content:"";position:absolute;z-index:-1;inset:10px -70px -30px 0;background:radial-gradient(ellipse at 38% 46%,#f5eedcf2 52%,#f5eedc00 76%)}
.dog{position:absolute;z-index:1;left:176px;bottom:16px;width:250px}

.ribbon{display:inline-block;align-self:flex-start;font:18px/1.7 var(--story);letter-spacing:.1em;color:var(--brick);border-bottom:1px solid #97594666;padding-bottom:3px;margin-bottom:16px}
h1{font:38px/1.65 var(--story);letter-spacing:.05em}
h2{font:30px/1.6 var(--story);letter-spacing:.04em;margin-bottom:16px}
.story h2{font-size:36px;line-height:1.65;margin-bottom:6px}
h3{font:22px/1.6 var(--story);letter-spacing:.03em;margin-bottom:8px}
p+p,dl+p,.item+p,.size+p,.tag+p,.person+p,.map+p,.vignette+p,.ways+p{margin-top:14px}
.eyebrow{font:18px/1.7 var(--story);letter-spacing:.12em;margin-bottom:12px;color:#565c46}
.line{font:21px/1.9 var(--story);letter-spacing:.05em;margin-top:18px}
.place{font:18px/1.7 var(--story);letter-spacing:.14em;margin-top:22px;color:#565c46;text-shadow:0 0 5px #f5eedc,0 0 10px #f5eedc,0 0 16px #f5eedc}
.quote{font:22px/1.75 var(--story);color:var(--brick);letter-spacing:.04em}
.note{color:#5a5f4c}
.folio{position:absolute;right:30px;bottom:18px;margin:0;font:18px/1 var(--story);letter-spacing:.1em;color:#655e45}

.item{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:center;margin-top:14px}
.item img{width:190px;height:136px;object-fit:contain}
.item b{display:block;font:20px/1.5 var(--story);font-weight:400;color:var(--brick)}
.vignette{width:240px;margin:2px 0 0}
.size{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center;margin-top:12px}
.who img{width:122px;height:86px;object-fit:contain}
.who p{font-size:18px;line-height:1.5}
.who b{display:block;font:22px/1.5 var(--story);font-weight:400}
.tags{display:grid;gap:12px}
.tag{position:relative;margin:0;background:#efe4c6;padding:8px 16px 8px 30px;border-radius:3px 10px 4px 8px;box-shadow:0 2px 0 #d9cba6,0 5px 10px #5a4a2a1c;transform:rotate(-.5deg)}
.tags .tag+.tag{margin-top:0;transform:rotate(.5deg)}
.tag::before{content:"";position:absolute;left:11px;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px #6b5a3477}
.tag span{display:block;font-size:18px;line-height:1.5}
.tag b{font:24px/1.4 var(--story);font-weight:400;margin-right:12px}
.tag small{font-size:18px}
.tag i{font-style:normal;font-size:18px;white-space:nowrap}
.tag.wide{margin:4px 0 0;max-width:430px}
.room{width:100%;height:190px;object-fit:contain;object-position:left center;margin-top:14px}
.person{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:center}
.person img{width:104px;height:150px;object-fit:contain}
dl{display:grid;grid-template-columns:92px 1fr;gap:12px 16px}
dt{font-family:var(--story);color:var(--brick);letter-spacing:.08em}
.map svg{display:block;width:100%;height:auto;max-height:290px}
.q{color:var(--brick)}
.ways{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.ways button{font:inherit;text-align:left;background:none;border:0;border-bottom:1px solid #655e4588;padding:6px 0 8px;color:inherit;cursor:pointer;min-height:44px}
.ways span{display:block;font-family:var(--story)}
.ways b{font-weight:400}
.letter{display:grid;gap:14px}
.letter label{display:block;font-family:var(--story)}
.letter i{font-style:normal;color:var(--brick);margin-left:6px}
.letter input,.letter textarea{display:block;margin-top:5px;font:inherit;font-family:var(--body);width:100%;min-height:46px;padding:8px 10px;border:0;border-bottom:1px solid #655e4599;border-radius:2px;background:#fbf6e6;color:inherit}
.letter textarea{resize:none}
.letter button{font:inherit;font-family:var(--story);min-height:48px;display:flex;justify-content:space-between;align-items:center;background:none;border:0;border-bottom:2px solid var(--ink);color:inherit;cursor:pointer;padding:6px 2px}
.end{text-align:center}
.ending{width:420px;margin:0 auto 14px}
.colophon .links{display:grid;justify-items:start;gap:4px;margin-top:20px}
.colophon a{color:inherit;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}
:focus-visible{outline:2px solid var(--brick);outline-offset:3px}
@media(max-width:760px){
  .masthead{flex-wrap:wrap;justify-content:center;padding:6px 8px}
  .spread{grid-template-columns:1fr}
  .pg{padding:32px 24px;min-height:0}
  .story .pg{min-height:440px}
  .art{width:auto;height:100%}
  .pg.r .art{left:auto;right:-10%}
  .copy{padding:30px 24px}
  .dog{left:30px;width:230px}
}

.has-book body{position:fixed;inset:0;overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:none}
.has-book .stage{flex:1;min-height:0;display:grid;place-items:center}
.has-book .book{position:relative;flex:none;width:1280px;height:600px;max-width:none;margin:0;padding:0;font-size:18px;transform:scale(var(--k));background:var(--paper);box-shadow:0 3px 0 #e0d5b8,0 7px 0 #ede3c9,0 10px 0 #c2b58d,0 16px 0 #435036,0 22px 27px #2f392950;border-radius:2px 3px 9px 5px;perspective:2600px;opacity:0;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.has-book.ready .book{opacity:1}
.has-book .book::after{content:"";position:absolute;z-index:15;left:50%;top:0;bottom:0;width:40px;margin-left:-20px;pointer-events:none;background:linear-gradient(90deg,#7a6a4500,#7a6a4524 44%,#6b5b3840 50%,#fff7e238 57%,#fff7e200)}
.has-book .spread{display:contents}
.has-book .pg{position:absolute;top:0;width:640px;height:600px;min-height:0;padding:44px 56px 48px;visibility:hidden;background:var(--paper)}
.has-book .pg.l{left:0}
.has-book .pg.r{left:640px}
.has-book .pg.on{visibility:visible}
.has-book .story .pg{padding:0}
.has-book .art{width:1280px;height:600px}
.has-book .pg.r .art{left:-640px}
.has-book .copy{padding:58px 0 0 70px;max-width:580px}
.has-book .count{display:block;position:absolute;z-index:16;left:75%;bottom:9px;transform:translateX(-50%);margin:0;padding:1px 14px;border-radius:12px;background:#f5eedcd9;font:16px/1.5 var(--story);letter-spacing:.1em;color:#655e45;pointer-events:none}
.has-book .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4% 10px;color:#f7f0dc}
.foot button{font:16px/1 var(--story);letter-spacing:.08em;color:#f7f0dc;background:none;border:1px solid #f7f0dc66;border-radius:6px;min-height:44px;min-width:44px;padding:0 16px;cursor:pointer}
.foot button:disabled{opacity:.3;cursor:default}
.hint{font:16px/1.4 var(--story);letter-spacing:.06em;opacity:.86}
.nav-foot{display:none}
.has-book input,.has-book textarea{-webkit-user-select:text;user-select:text;cursor:text}
@media(max-height:700px){.masthead{min-height:48px}.has-book .foot{padding:0 4% 5px}}

.one-up .masthead{min-height:44px;justify-content:center;padding:0 8px;flex-wrap:nowrap}
.one-up .brand{font-size:20px}
.one-up .nav-top,.one-up .hint,.one-up .foot .w{display:none}
.one-up .nav-foot{display:flex}
.one-up .foot{padding:0 5px 5px;gap:0}
.one-up .foot nav a{padding:0 6px;letter-spacing:0}
.one-up .foot button{padding:0 8px}
.one-up .book{width:344px;height:504px;font-size:16px;line-height:1.8;perspective:1700px}
.one-up .book::after{left:0;margin:0;width:14px;background:linear-gradient(90deg,#6b5b383d,#6b5b3800)}
.one-up .pg{display:contents}
.one-up .sc{position:absolute;inset:0;margin:0;overflow:hidden;visibility:hidden;display:flex;flex-direction:column;justify-content:center;padding:22px 22px 42px;background:var(--paper)}
.one-up .sc.on{visibility:visible}
.one-up .story .sc{padding:0;justify-content:flex-start}
.one-up .art{width:896px;height:504px;left:0}
.one-up .pg.r .art,.one-up .sc.is-r .art{left:var(--mx,-420px)}
.one-up .copy{padding:24px 24px 0;max-width:none}
.one-up .copy::before{inset:0 -10px -36px -10px;background:linear-gradient(180deg,#f5eedcf7 88%,#f5eedc00)}
.one-up h1{font-size:25px;line-height:1.65;letter-spacing:.01em}
.one-up h2{font-size:24px;margin-bottom:10px}
.one-up .story h2{font-size:27px;line-height:1.6}
.one-up h3{font-size:19px}
.one-up .ribbon,.one-up .eyebrow,.one-up .place,.one-up .folio{font-size:16px}
.one-up .ribbon{margin-bottom:10px}
.one-up .line{font-size:17px;letter-spacing:.02em;margin-top:12px}
.one-up .quote{font-size:17px;letter-spacing:0}
.one-up .dog{left:66px;bottom:46px;width:230px}
.one-up .item{grid-template-columns:112px 1fr;gap:14px}
.one-up .item img{width:112px;height:84px}
.one-up .vignette{width:170px}
.one-up .size{grid-template-columns:1fr;gap:8px;margin-top:8px}
.one-up .who{display:flex;align-items:center;gap:14px}
.one-up .who img{width:108px;height:76px}
.one-up .who p{font-size:16px}
.one-up .who b{font-size:20px}
.one-up .tag span,.one-up .tag small,.one-up .tag i{font-size:16px}
.one-up .tag b{font-size:21px}
.one-up .room{height:128px}
.one-up .person{grid-template-columns:88px 1fr;gap:14px}
.one-up .person img{width:88px;height:126px}
.one-up dl{grid-template-columns:76px 1fr;gap:10px 10px}
.one-up .map svg{max-height:176px}
.one-up .ways{gap:10px}
.one-up .letter{gap:10px}
.one-up .ending{width:250px}
.one-up .count{left:50%;bottom:7px}
.one-up .folio{right:20px;bottom:12px}

.leaf{position:absolute;z-index:20;top:0;height:100%;pointer-events:none;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform}
.leaf.next{left:640px;width:640px;transform-origin:0 50%;animation:turn-next var(--t) cubic-bezier(.5,.05,.3,1) both}
.leaf.prev{left:0;width:640px;transform-origin:100% 50%;animation:turn-prev var(--t) cubic-bezier(.5,.05,.3,1) both}
@keyframes turn-next{from{transform:rotateY(0)}to{transform:rotateY(-180deg)}}
@keyframes turn-prev{from{transform:rotateY(0)}to{transform:rotateY(180deg)}}
.face{position:absolute;inset:0;overflow:hidden;background:var(--paper);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 0 22px #3f352d3d}
.face.back{transform:rotateY(180deg)}
.face>.pg,.face>.sc{position:absolute!important;left:0!important;top:0!important;visibility:visible!important}
.face::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,#4a3d24b3,#4a3d2400 60%);animation:leaf-shade var(--t) ease-in-out both}
.leaf.next .back::after,.leaf.prev .front::after{background:linear-gradient(270deg,#4a3d24b3,#4a3d2400 60%)}
@keyframes leaf-shade{0%{opacity:0}50%{opacity:.5}100%{opacity:0}}
.one-up .leaf{left:0;width:344px;transform-origin:0 50%}
.one-up .leaf.next{animation:turn-one .62s cubic-bezier(.45,0,.8,.45) both}
.one-up .leaf.prev{animation:turn-one .62s cubic-bezier(.2,.55,.55,1) reverse both}
.one-up .face::after{animation-duration:.62s}
.one-up .face.back{background:linear-gradient(95deg,#fcf7e9,var(--paper) 65%,#ecdfc3)}
@keyframes turn-one{from{transform:rotateY(0)}to{transform:rotateY(-104deg)}}