@font-face{font-family:Shippori;src:url(/fonts/shippori-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Shippori;src:url(/fonts/shippori-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:ZenKaku;src:url(/fonts/zenkaku-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:ZenKaku;src:url(/fonts/zenkaku-500.woff2) format("woff2");font-weight:500;font-display:swap}
:root{
--ink:#142f44;--ink-soft:#2e4a5e;--snow:#f8fafa;--mist:#e8f0f2;--seal:#a11f1f;
--sky-top:#c6dfec;--sky-mid:#f6e3da;--sky-low:#f8fafa;--sun:#ef9d84;--sun-glow:rgba(245,170,140,.5);
--serif:Shippori,"Hiragino Mincho ProN","Times New Roman",serif;--sans:ZenKaku,"Hiragino Sans","Segoe UI",sans-serif}
html[data-sky=noon]{--sky-top:#b2d6ec;--sky-mid:#e8f3f6;--sky-low:#f8fafa;--sun:#f6d9a0;--sun-glow:rgba(250,225,170,.55)}
html[data-sky=evening]{--sky-top:#d4cfe6;--sky-mid:#f8d8c6;--sky-low:#f8fafa;--sun:#e0705f;--sun-glow:rgba(232,120,100,.45)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--snow);color:var(--ink);font:400 clamp(18px,.55vw + 11.5px,24px)/1.75 var(--serif);overflow-x:clip}
a{color:var(--seal);text-underline-offset:.18em}a:hover{color:#761414}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--seal);outline-offset:3px}
h1,h2{font-family:var(--serif);font-weight:700;line-height:1.15;color:var(--ink)}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:8px 14px;z-index:60}.skip:focus{left:8px;top:8px}

header.site{position:absolute;inset:0 0 auto;z-index:30;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 26px;padding:18px clamp(16px,4vw,48px)}
.logo img{display:block;width:clamp(178px,14vw,300px);height:auto}
header.site nav{display:flex;flex-wrap:wrap;gap:2px 24px;font:500 clamp(15px,.45vw + 9px,20px)/1.4 var(--sans)}
header.site nav a{color:var(--ink);text-decoration:none;padding:7px 0;border-bottom:2px solid transparent}
header.site nav a:hover,header.site nav a[aria-current]{border-color:var(--seal)}

/* Scenes */
.sky,.ridge,.veil,.drift{position:absolute;inset:0}
.sky{background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-mid) 48%,var(--sky-low) 82%)}
.grain{position:absolute;inset:0;z-index:7;pointer-events:none;background:url(/images/paper-grain.png);mix-blend-mode:multiply;opacity:.55}
.sun{position:absolute;left:var(--sun-x,64%);top:var(--sun-y,24%);width:clamp(130px,23vmin,300px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 42% 38%,var(--sun) 0,var(--sun) 58%,transparent 72%);box-shadow:0 0 110px 44px var(--sun-glow);opacity:.9;transform:translate(-50%,calc(var(--rise,0)*-1px))}
.ridge{will-change:transform;pointer-events:none}.ridge svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.drift{pointer-events:none;width:100%;height:100%}
.veil{background:linear-gradient(180deg,rgba(248,250,250,0),var(--snow));opacity:0;pointer-events:none}

/* Opening film */
.film{position:relative}
.stage{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,6vh,60px);padding:110px 18px 90px;text-align:center}
.title-card,.film .verse{position:relative;z-index:10;margin:0}
.verse{margin:0}
.film .verse::before{content:"";position:absolute;z-index:-1;inset:-16% -9%;background:radial-gradient(closest-side,rgba(250,252,252,.88) 36%,rgba(250,252,252,.55) 66%,rgba(250,252,252,0))}
.title-card h1{margin:0;font-size:clamp(64px,13vw,300px);letter-spacing:-.022em;line-height:.95;font-weight:400}
.title-card p{margin:clamp(12px,2vh,26px) 0 0 .3em;font-size:clamp(18px,2vw,44px);color:var(--ink)}
.verse blockquote{margin:0;font-size:clamp(22px,3.1vw,68px);line-height:1.55;letter-spacing:.08em}
.verse .l{display:block}
.verse figcaption{margin-top:clamp(16px,3vh,30px);font:400 clamp(16px,1.1vw,24px)/1.5 var(--sans)}
.verse figcaption a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--seal)}
.verse a{pointer-events:auto}
.cue{position:absolute;z-index:11;left:0;right:0;bottom:18px;margin:0;font:500 clamp(15px,.8vw,19px)/1.4 var(--sans);color:var(--ink)}
.cue::after{content:"";display:block;width:1px;height:38px;background:var(--ink);margin:8px auto 0;transform-origin:top;animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}55%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
html.js .film{height:380svh}
html.js .stage{position:sticky;top:0;height:100svh;min-height:0;padding:0 18px}
html.js .film .verse{position:absolute;left:50%;top:46%;translate:-50% -50%;width:min(92vw,max-content)}
html.js .title-card{position:absolute;left:clamp(18px,6vw,130px);right:18px;top:clamp(90px,17vh,210px);text-align:left}
html.js .film .verse .l,html.js .film .verse figcaption{opacity:0;filter:blur(9px);will-change:opacity,filter}
html.js .title-card{will-change:opacity,transform}
.ridge[data-depth]{transform:translate3d(0,calc(var(--lift,0)*var(--d,0)*-1px),0)}

/* Eighteen slips on a branch */
.bough{position:relative;padding:clamp(30px,6vh,70px) 0 clamp(50px,9vh,110px);background:var(--snow)}
.bough-head{padding:0 clamp(16px,4vw,48px);max-width:1760px;margin:0 auto}
.bough h2{font-size:clamp(34px,5.4vw,72px);margin:0;font-weight:400}
.bough-head p{margin:10px 0 0;font:400 clamp(17px,1vw,22px)/1.5 var(--sans)}
.branch-wrap{overflow-x:auto;scroll-snap-type:x proximity;padding:24px 0 26px;-webkit-overflow-scrolling:touch}
.branch{position:relative;min-width:1100px;max-width:1760px;margin:0 auto;padding:0 28px}
.branch>svg{position:absolute;left:0;top:0;width:100%;height:clamp(58px,4.5vw,84px);overflow:visible}
.slips{list-style:none;margin:0;padding:26px 0 0;display:grid;grid-template-columns:repeat(18,1fr);gap:clamp(9px,.8vw,18px);position:relative;--k:1}
@media(min-width:1500px){.slips{--k:1.32}}
@media(min-width:2100px){.slips{--k:1.65}}
.slips li{scroll-snap-align:center;margin-top:var(--drop,0)}
.slip{position:relative;display:flex;justify-content:center;align-items:flex-start;height:calc(var(--len,250px)*var(--k));padding:22px 0 10px;background:var(--wash);color:var(--ink);text-decoration:none;writing-mode:vertical-rl;font:400 clamp(20px,1.25vw,30px)/1 var(--serif);letter-spacing:.09em;box-shadow:0 1px 0 rgba(20,47,68,.14),0 16px 24px -16px rgba(20,47,68,.45);transform-origin:50% -26px;transition:transform .9s cubic-bezier(.2,.8,.25,1)}
.slip::before{content:"";position:absolute;left:50%;top:-26px;width:1px;height:26px;background:var(--ink-soft)}
.slip::after{content:"";position:absolute;left:50%;top:8px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--snow);box-shadow:inset 0 0 0 1px var(--ink-soft)}
.slip:hover,.slip:focus-visible{transform:rotate(calc(var(--swing,1)*4.5deg));color:var(--seal)}

.welcome{max-width:860px;margin:0 auto;padding:clamp(20px,5vh,60px) 18px clamp(60px,11vh,130px)}
.welcome h2{font-size:clamp(30px,4.2vw,50px);margin:0 0 22px;font-weight:400}
.welcome img{float:left;width:min(44%,300px);margin:8px 28px 14px 0;box-shadow:0 22px 40px -22px rgba(20,47,68,.55)}
.welcome::after{content:"";display:block;clear:both}
.welcome p{margin:0 0 1.15em}

/* Page vistas */
.vista{position:relative;overflow:hidden;min-height:clamp(330px,50vh,520px);display:flex;align-items:flex-start;padding:clamp(100px,14vh,170px) clamp(16px,4vw,48px) clamp(120px,24vh,260px)}
.vista-copy{position:relative;z-index:9;width:100%;max-width:1760px;margin:0 auto}
.vista h1{margin:0;font-size:clamp(46px,7.4vw,170px);font-weight:400;letter-spacing:-.016em;line-height:1.02}
.vista .veil{opacity:1;top:auto;height:22%}
.vista-issue{min-height:clamp(560px,86vh,1000px)}
.vista-issue .vista-copy{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.vista-issue .verse blockquote{font-size:clamp(18px,1.9vw,40px);line-height:1.55;letter-spacing:.075em}
.vista-issue .verse{max-width:1100px;text-align:left}
.vista-issue .l{display:block}
.vista-issue .verse figcaption{margin-top:10px;font-size:16px}
.vista .meta{margin:4px 0 0;font:400 clamp(16px,1vw,21px)/1.5 var(--sans)}
.prose{max-width:780px;margin:0 auto;padding:clamp(20px,4vh,46px) 18px clamp(50px,9vh,100px)}
.prose p{margin:0 0 1.15em}
.prose figure{margin:0 0 20px}
.covers img{margin:0 10px 10px 0}

/* Flipbook */
.flip{position:relative;padding:clamp(10px,3vh,34px) clamp(8px,3vw,40px) clamp(30px,5vh,60px);background:linear-gradient(180deg,var(--snow),var(--mist) 26%,var(--mist) 80%,var(--snow))}
.flip-head{max-width:1760px;margin:0 auto 14px;padding:0 8px;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 20px}
.flip-head h2{margin:0;font-size:clamp(26px,3.4vw,40px);font-weight:400}
.flip-head p{margin:0;font:400 clamp(16px,.9vw,20px)/1.5 var(--sans)}
.reader{list-style:none;margin:0 auto;padding:0;max-width:620px}
.reader li{margin:0 0 16px;background:#fff}
.reader img{display:block;width:100%;box-shadow:0 14px 26px -18px rgba(20,47,68,.5)}
.flip-ready .reader{display:none}
.flip-ready.show-list .reader{display:block}
.flip-ready.show-list .book-wrap,.flip-ready.show-list .controls-main{display:none}
.book-wrap{position:relative;display:flex;justify-content:center;align-items:center;perspective:2600px;overflow:hidden;padding:18px 0 30px}
.book{position:relative;flex:none;transition:transform .9s cubic-bezier(.3,.7,.2,1);transform-style:preserve-3d}
.book.closed-front{transform:translateX(-25%)}
.book.closed-back{transform:translateX(25%)}
.pg,.leaf{position:absolute;top:0;bottom:0;width:50%}
.pg.left,.leaf.left{left:0}.pg.right,.leaf{left:50%}
.pg{background:#fff;overflow:hidden;box-shadow:0 30px 44px -28px rgba(20,47,68,.6)}
.pg.empty{background:transparent;box-shadow:none}
.pg img,.face img{display:block;width:100%;height:100%;object-fit:contain;background:#fff;user-select:none;-webkit-user-drag:none}
.pg.cover-page img,.face.cover-page img{object-fit:cover}
.pg.left::after,.pg.right::after,.face::after{content:"";position:absolute;inset:0;pointer-events:none}
.pg.left::after{background:linear-gradient(270deg,rgba(20,47,68,.1),transparent 7%)}
.pg.right::after{background:linear-gradient(90deg,rgba(20,47,68,.11),transparent 7%)}
.pg.empty::after{display:none}
.pg.cover-page::after{background:linear-gradient(90deg,rgba(20,47,68,.32),rgba(255,255,255,.14) 3%,transparent 7%)}
.leaf{transform-origin:left center;transform-style:preserve-3d;z-index:6;pointer-events:none}
.face{position:absolute;inset:0;backface-visibility:hidden;background:#fff;overflow:hidden}
.face.back{transform:rotateY(180deg)}
.face .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,47,68,.34),transparent 60%);opacity:0}
.hit{position:absolute;top:0;bottom:0;width:50%;background:none;border:0;padding:0;cursor:pointer;z-index:8}
.hit.prev{left:0;cursor:w-resize}.hit.next{left:50%;cursor:e-resize}.hit:disabled{cursor:default}
.controls{max-width:880px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;font:400 16px/1.4 var(--sans)}
.controls-main button,.controls button,.controls a{font:inherit;color:var(--ink);background:#fff;border:1px solid #9db4c0;padding:9px 16px;min-height:44px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.controls-main button:hover:not(:disabled),.controls button:hover:not(:disabled),.controls a:hover{border-color:var(--ink);color:var(--ink);background:var(--snow)}
.controls-main button:disabled,.controls button:disabled{opacity:.45;cursor:default}
.controls-main{display:flex;flex:1 1 100%;align-items:center;gap:14px;max-width:880px;margin:0 auto 12px;font:400 16px/1.4 var(--sans)}
.controls-main button{color:var(--ink);background:#fff;border:1px solid #9db4c0;padding:9px 16px;min-height:44px;cursor:pointer}
.controls-main input[type=range]{flex:1;min-width:80px;accent-color:var(--seal);height:32px}
.controls-main output{min-width:118px;text-align:center;font:400 16px/1.4 var(--sans)}
html.book-open,html.book-open body{overflow:hidden}
.flip.immersive{position:fixed;inset:0;z-index:100;height:100dvh;background:var(--mist);padding:10px 12px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.flip.immersive .flip-head{display:none}
.flip.immersive .book-wrap{flex:1 1 auto;min-height:0;padding:6px 0}
.flip.immersive .controls-main{flex:none;margin:0 auto 6px;width:100%}
.flip.immersive .controls{flex:none;width:100%}
.turn{position:absolute;top:50%;z-index:12;width:clamp(50px,4.6vw,76px);height:clamp(50px,4.6vw,76px);margin-top:calc(clamp(50px,4.6vw,76px)/-2);padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--seal);color:#fff;cursor:pointer;box-shadow:0 12px 24px -8px rgba(90,14,14,.75),0 0 0 4px rgba(255,255,255,.75);transition:background .25s,transform .25s,opacity .3s,left .9s cubic-bezier(.3,.7,.2,1)}
.turn svg{width:52%;height:52%;display:block}
.turn.prev{left:4px}.turn.next{right:auto;left:calc(100% - 54px)}
.turn.next svg{animation:nudge-next 2.2s ease-in-out infinite}
.turn.prev svg{animation:nudge-prev 2.2s ease-in-out infinite}
.turn:hover,.turn:focus-visible{background:#7f1414;transform:scale(1.1)}
.turn:disabled{opacity:0;pointer-events:none}
@keyframes nudge-next{0%,100%{transform:translateX(-7%)}50%{transform:translateX(9%)}}
@keyframes nudge-prev{0%,100%{transform:translateX(7%)}50%{transform:translateX(-9%)}}
@media(max-width:760px){
.book.closed-front,.book.closed-back{transform:none}
.pg.left{display:none}.pg.right,.leaf{left:0;width:100%}
.pg.right::after{background:none}
.hit.prev{width:35%}.hit.next{left:35%;width:65%}
.turn{width:46px;height:46px;margin-top:-23px;box-shadow:0 8px 16px -6px rgba(90,14,14,.75),0 0 0 3px rgba(255,255,255,.8)}
.controls a,.controls button{flex:1 1 auto;justify-content:center}
.flip-head{display:block}
}

.after-book{max-width:1000px;margin:0 auto;padding:clamp(24px,5vh,52px) clamp(16px,4vw,48px) 0}
.pager{max-width:1760px;margin:0 auto;padding:0 clamp(16px,4vw,48px) clamp(60px,9vh,110px);display:flex;justify-content:space-between;gap:20px}
.pager a{display:flex;align-items:center;gap:16px;color:var(--ink);text-decoration:none;font:400 clamp(19px,2.2vw,26px)/1.2 var(--serif)}
.pager a:hover{color:var(--seal)}.pager a.nxt{flex-direction:row-reverse;text-align:right}
.pager img{width:clamp(62px,8vw,88px);box-shadow:0 14px 22px -14px rgba(20,47,68,.6)}

/* Cover cards */
.shelf-intro{max-width:1760px;margin:0 auto;padding:clamp(4px,1vh,14px) clamp(16px,4vw,48px) 4px}
.shelf-intro p{margin:0}
.shelf{list-style:none;max-width:1760px;margin:0 auto;padding:30px clamp(16px,4vw,48px) clamp(60px,10vh,120px);display:grid;grid-template-columns:repeat(auto-fill,minmax(min(clamp(190px,13vw,300px),38vw),1fr));gap:clamp(20px,3vw,38px) clamp(14px,2.2vw,30px)}
.card{display:flex;flex-direction:column;height:100%;padding:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) 18px;background:linear-gradient(170deg,#fff,var(--mist));color:var(--ink);text-decoration:none;perspective:900px;transition:background .5s}
.tome{position:relative;display:block;aspect-ratio:5/8;transform-origin:left center;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.8,.2,1),box-shadow .85s;box-shadow:0 24px 30px -22px rgba(20,47,68,.7),0 2px 5px rgba(20,47,68,.18)}
.tome img{display:block;width:100%;height:100%;object-fit:cover;background:#fff}
.tome::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(20,47,68,.36),rgba(255,255,255,.2) 2.5%,transparent 6%)}
.card:hover .tome,.card:focus-visible .tome{transform:rotateY(-20deg) translateZ(14px);box-shadow:26px 28px 34px -20px rgba(20,47,68,.55)}
.card strong{display:block;margin-top:16px;font:400 clamp(22px,2.1vw,27px)/1.15 var(--serif)}
.card:hover strong{color:var(--seal)}
.card .line{display:block;margin-top:7px;font:400 clamp(15px,.85vw,19px)/1.45 var(--sans)}
.card .by{display:block;margin-top:3px;font:400 clamp(14.5px,.8vw,18px)/1.4 var(--sans);color:var(--ink-soft)}

/* Theme pages */
.theme-prose h2{font-size:clamp(25px,2.4vw,38px);font-weight:400;margin:1.6em 0 .5em}
.theme-prose h3{font-size:clamp(20px,1.5vw,27px);font-weight:400;margin:1.3em 0 .3em;line-height:1.3}
q.pq{quotes:none;text-transform:lowercase;font-variant-caps:small-caps;letter-spacing:.03em;white-space:normal}
.anthology{background:linear-gradient(180deg,var(--snow),var(--mist) 90px,var(--mist) calc(100% - 90px),var(--snow));padding:clamp(24px,5vh,56px) clamp(16px,4vw,48px)}
.anthology h2{max-width:1760px;margin:0 auto 20px;font-size:clamp(30px,3.6vw,56px);font-weight:400}
.poems{max-width:1760px;margin:0 auto;columns:4 clamp(240px,20vw,420px);column-gap:clamp(14px,1.6vw,28px)}
.poem{break-inside:avoid;margin:0 0 clamp(14px,1.6vw,28px);padding:clamp(18px,1.6vw,28px);background:#fff;box-shadow:0 18px 26px -24px rgba(20,47,68,.6)}
.poem .pt{margin:0 0 .55em;font:500 clamp(14px,.8vw,17px)/1.35 var(--sans);color:var(--ink-soft)}
.poem blockquote{margin:0;font-size:clamp(19px,1.25vw,26px);line-height:1.45;text-transform:lowercase;font-variant-caps:small-caps;letter-spacing:.03em}
.poem .l{display:block}
.poem figcaption{margin-top:.85em;font:400 clamp(14.5px,.8vw,17px)/1.45 var(--sans)}
.chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0}
.chips a{display:inline-block;padding:7px 14px;background:var(--mist);color:var(--ink);text-decoration:none;font:400 clamp(15px,.85vw,18px)/1.3 var(--sans)}
.chips a:hover,.chips a:focus-visible{background:var(--seal);color:#fff}
.after-book h2+.chips{margin-bottom:10px}
.theme-index{max-width:1500px;margin:0 auto;padding:0 clamp(16px,4vw,48px) clamp(60px,10vh,110px)}
.theme-group{margin-top:clamp(26px,4vh,46px)}
.theme-group h2{font-size:clamp(25px,2.4vw,40px);font-weight:400;margin:0 0 14px}
.theme-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,44vw),1fr));gap:clamp(8px,1vw,16px)}
.theme-tile{display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(96px,8vw,150px);padding:14px 16px;background:var(--wash);color:var(--ink);text-decoration:none;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.theme-tile strong{font:400 clamp(20px,1.6vw,30px)/1.15 var(--serif)}
.theme-tile span{margin-top:4px;font:400 clamp(14.5px,.8vw,17px)/1.3 var(--sans)}
.theme-tile:hover,.theme-tile:focus-visible{transform:translateY(-4px) rotate(-.6deg);box-shadow:0 18px 26px -18px rgba(20,47,68,.6);color:var(--ink)}
.bough-head a{color:var(--seal)}

footer.site{padding:30px 18px 34px;text-align:center;font:400 15px/1.5 var(--sans);background:var(--mist);color:var(--ink)}
footer.site nav{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 22px;margin-bottom:10px}
footer.site p{margin:0}
footer.site a{color:var(--ink)}

@media(max-width:560px){body{font-size:18px}header.site{justify-content:center}header.site nav{justify-content:center;gap:0 16px;font-size:15px}.welcome img{float:none;display:block;width:62%;margin:0 auto 20px}.vista{padding-top:124px}html.js .title-card{top:120px}.pager a span{font-size:18px}}
@media(prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
html.js .film{height:auto}html.js .stage{position:relative;height:auto;min-height:100svh;padding:110px 18px 70px}
html.js .title-card,html.js .film .verse{position:relative;left:auto;right:auto;top:auto;translate:none;width:auto}
html.js .title-card{text-align:center}
html.js .film .verse .l,html.js .film .verse figcaption{opacity:1;filter:none}
.cue,.drift{display:none}
.slip,.tome,.book{transition:none}
.turn svg{animation:none!important}
}
@media print{header.site nav,footer.site nav,.pager,.controls,.controls-main,.book-wrap,.drift,.cue{display:none!important}.flip-ready .reader{display:block}}