/* 糧 — a book of my life. Plain CSS, no build step.
   Every page is drawn at a fixed 600 × 840 and the whole book is scaled to fit
   the window, so nothing can collide at any screen size. */
:root{
  --ink:#221A13; --ink-2:#463B30; --ink-3:#6F6354;
  --shu:#C2361F;                       /* vermilion seal ink */
  --en:'EB Garamond',Georgia,serif;
  --display:'Cormorant Garamond','EB Garamond',Georgia,serif;
  --jp:'Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --brush:'Yuji Syuku','Shippori Mincho','Hiragino Mincho ProN','Yu Mincho',serif;
  --accent:#B8371E; --wallc:#1E2B45;
  --a-leaving:#2B5F8E; --a-table:#B8371E; --a-sky:#C06A1F; --a-garden:#2E7347;
  --a-road:#23707F; --a-market:#A63D5A; --a-play:#6A4C9C; --a-desk:#34568B; --a-envoi:#C2552B;
  --pw-asanoha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='51.96' viewBox='0 0 30 51.96'%3E%3Cpath d='M0.00 0.00L30.00 0.00M30.00 0.00L15.00 25.98M15.00 25.98L0.00 0.00M0.00 0.00L15.00 8.66M30.00 0.00L15.00 8.66M15.00 25.98L15.00 8.66M0.00 0.00L15.00 25.98M15.00 25.98L-15.00 25.98M-15.00 25.98L0.00 0.00M0.00 0.00L0.00 17.32M15.00 25.98L0.00 17.32M-15.00 25.98L0.00 17.32M30.00 0.00L45.00 25.98M45.00 25.98L15.00 25.98M15.00 25.98L30.00 0.00M30.00 0.00L30.00 17.32M45.00 25.98L30.00 17.32M15.00 25.98L30.00 17.32M15.00 25.98L0.00 51.96M0.00 51.96L30.00 51.96M30.00 51.96L15.00 25.98M15.00 25.98L15.00 43.30M0.00 51.96L15.00 43.30M30.00 51.96L15.00 43.30M15.00 25.98L-15.00 25.98M-15.00 25.98L0.00 51.96M0.00 51.96L15.00 25.98M15.00 25.98L0.00 34.64M-15.00 25.98L0.00 34.64M0.00 51.96L0.00 34.64M15.00 25.98L45.00 25.98M45.00 25.98L30.00 51.96M30.00 51.96L15.00 25.98M15.00 25.98L30.00 34.64M45.00 25.98L30.00 34.64M30.00 51.96L30.00 34.64' fill='none' stroke='%23FFF3DC' stroke-opacity='.11' stroke-width='1'/%3E%3C/svg%3E");
  --pk-asanoha:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='51.96' viewBox='0 0 30 51.96'%3E%3Cpath d='M0.00 0.00L30.00 0.00M30.00 0.00L15.00 25.98M15.00 25.98L0.00 0.00M0.00 0.00L15.00 8.66M30.00 0.00L15.00 8.66M15.00 25.98L15.00 8.66M0.00 0.00L15.00 25.98M15.00 25.98L-15.00 25.98M-15.00 25.98L0.00 0.00M0.00 0.00L0.00 17.32M15.00 25.98L0.00 17.32M-15.00 25.98L0.00 17.32M30.00 0.00L45.00 25.98M45.00 25.98L15.00 25.98M15.00 25.98L30.00 0.00M30.00 0.00L30.00 17.32M45.00 25.98L30.00 17.32M15.00 25.98L30.00 17.32M15.00 25.98L0.00 51.96M0.00 51.96L30.00 51.96M30.00 51.96L15.00 25.98M15.00 25.98L15.00 43.30M0.00 51.96L15.00 43.30M30.00 51.96L15.00 43.30M15.00 25.98L-15.00 25.98M-15.00 25.98L0.00 51.96M0.00 51.96L15.00 25.98M15.00 25.98L0.00 34.64M-15.00 25.98L0.00 34.64M0.00 51.96L0.00 34.64M15.00 25.98L45.00 25.98M45.00 25.98L30.00 51.96M30.00 51.96L15.00 25.98M15.00 25.98L30.00 34.64M45.00 25.98L30.00 34.64M30.00 51.96L30.00 34.64' fill='none' stroke='%23000' stroke-opacity='1' stroke-width='1.2'/%3E%3C/svg%3E");
  --ps-asanoha:60.00px 103.92px;
  --pw-kikko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'%3E%3Cpath d='M40 17.32L30 34.64L10 34.64L0 17.32L10 0L30 0Z M40 17.32L60 17.32' fill='none' stroke='%23FFF3DC' stroke-opacity='.11' stroke-width='1'/%3E%3C/svg%3E");
  --pk-kikko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='34.64' viewBox='0 0 60 34.64'%3E%3Cpath d='M40 17.32L30 34.64L10 34.64L0 17.32L10 0L30 0Z M40 17.32L60 17.32' fill='none' stroke='%23000' stroke-opacity='1' stroke-width='1.2'/%3E%3C/svg%3E");
  --ps-kikko:120.00px 69.28px;
  --pw-shippo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23FFF3DC' stroke-opacity='.11' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3C/g%3E%3C/svg%3E");
  --pk-shippo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='1' stroke-width='1.2'%3E%3Ccircle cx='0' cy='0' r='20'/%3E%3Ccircle cx='40' cy='0' r='20'/%3E%3Ccircle cx='0' cy='40' r='20'/%3E%3Ccircle cx='40' cy='40' r='20'/%3E%3Ccircle cx='20' cy='20' r='20'/%3E%3C/g%3E%3C/svg%3E");
  --ps-shippo:80.00px 80.00px;
  --pw-tatewaku:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='80' viewBox='0 0 48 80'%3E%3Cpath d='M14 0C2 13 2 27 14 40C26 53 26 67 14 80M34 0C46 13 46 27 34 40C22 53 22 67 34 80' fill='none' stroke='%23FFF3DC' stroke-opacity='.11' stroke-width='1'/%3E%3C/svg%3E");
  --pk-tatewaku:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='80' viewBox='0 0 48 80'%3E%3Cpath d='M14 0C2 13 2 27 14 40C26 53 26 67 14 80M34 0C46 13 46 27 34 40C22 53 22 67 34 80' fill='none' stroke='%23000' stroke-opacity='1' stroke-width='1.2'/%3E%3C/svg%3E");
  --ps-tatewaku:96.00px 160.00px;
  --pw-kanoko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23FFF3DC' fill-opacity='.06'%3E%3Crect x='3' y='3' width='6' height='6' transform='rotate%2845 6 6%29'/%3E%3Crect x='15' y='15' width='6' height='6' transform='rotate%2845 18 18%29'/%3E%3C/g%3E%3C/svg%3E");
  --pk-kanoko:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='%23000' fill-opacity='1'%3E%3Crect x='3' y='3' width='6' height='6' transform='rotate%2845 6 6%29'/%3E%3Crect x='15' y='15' width='6' height='6' transform='rotate%2845 18 18%29'/%3E%3C/g%3E%3C/svg%3E");
  --ps-kanoko:48.00px 48.00px;
  --pw-ichimatsu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23FFF3DC' fill-opacity='.06'%3E%3Crect width='22' height='22'/%3E%3Crect x='22' y='22' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E");
  --pk-ichimatsu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%23000' fill-opacity='1'%3E%3Crect width='22' height='22'/%3E%3Crect x='22' y='22' width='22' height='22'/%3E%3C/g%3E%3C/svg%3E");
  --ps-ichimatsu:88.00px 88.00px;
  --pw-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23FFF3DC'%3E%3Ccircle cx='108.6' cy='134.3' r='1.42' fill-opacity='0.15'/%3E%3Ccircle cx='121.9' cy='141.0' r='0.68' fill-opacity='0.16'/%3E%3Ccircle cx='151.2' cy='190.3' r='0.59' fill-opacity='0.12'/%3E%3Ccircle cx='21.8' cy='194.3' r='1.19' fill-opacity='0.08'/%3E%3Ccircle cx='235.7' cy='231.5' r='1.15' fill-opacity='0.18'/%3E%3Ccircle cx='37.8' cy='3.6' r='1.03' fill-opacity='0.08'/%3E%3Ccircle cx='45.6' cy='58.1' r='0.53' fill-opacity='0.15'/%3E%3Ccircle cx='105.7' cy='202.2' r='1.02' fill-opacity='0.18'/%3E%3Ccircle cx='119.9' cy='159.0' r='0.96' fill-opacity='0.12'/%3E%3Ccircle cx='239.4' cy='239.0' r='1.34' fill-opacity='0.19'/%3E%3Ccircle cx='75.7' cy='55.1' r='0.79' fill-opacity='0.08'/%3E%3Ccircle cx='183.9' cy='96.1' r='1.35' fill-opacity='0.14'/%3E%3Ccircle cx='229.9' cy='203.4' r='0.50' fill-opacity='0.11'/%3E%3Ccircle cx='218.5' cy='112.8' r='1.48' fill-opacity='0.14'/%3E%3Ccircle cx='17.5' cy='151.1' r='1.28' fill-opacity='0.12'/%3E%3Ccircle cx='20.9' cy='79.8' r='1.46' fill-opacity='0.20'/%3E%3Ccircle cx='28.3' cy='59.1' r='0.60' fill-opacity='0.08'/%3E%3Ccircle cx='191.3' cy='42.6' r='1.06' fill-opacity='0.15'/%3E%3Ccircle cx='45.8' cy='175.7' r='0.63' fill-opacity='0.18'/%3E%3Ccircle cx='28.0' cy='101.0' r='0.71' fill-opacity='0.12'/%3E%3Ccircle cx='233.0' cy='192.8' r='0.80' fill-opacity='0.22'/%3E%3Ccircle cx='50.6' cy='94.6' r='1.35' fill-opacity='0.18'/%3E%3C/g%3E%3C/svg%3E");
  --pk-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='%23000'%3E%3Ccircle cx='108.6' cy='134.3' r='1.42' fill-opacity='2.50'/%3E%3Ccircle cx='121.9' cy='141.0' r='0.68' fill-opacity='2.63'/%3E%3Ccircle cx='151.2' cy='190.3' r='0.59' fill-opacity='2.05'/%3E%3Ccircle cx='21.8' cy='194.3' r='1.19' fill-opacity='1.32'/%3E%3Ccircle cx='235.7' cy='231.5' r='1.15' fill-opacity='2.92'/%3E%3Ccircle cx='37.8' cy='3.6' r='1.03' fill-opacity='1.37'/%3E%3Ccircle cx='45.6' cy='58.1' r='0.53' fill-opacity='2.50'/%3E%3Ccircle cx='105.7' cy='202.2' r='1.02' fill-opacity='2.99'/%3E%3Ccircle cx='119.9' cy='159.0' r='0.96' fill-opacity='1.98'/%3E%3Ccircle cx='239.4' cy='239.0' r='1.34' fill-opacity='3.18'/%3E%3Ccircle cx='75.7' cy='55.1' r='0.79' fill-opacity='1.40'/%3E%3Ccircle cx='183.9' cy='96.1' r='1.35' fill-opacity='2.28'/%3E%3Ccircle cx='229.9' cy='203.4' r='0.50' fill-opacity='1.79'/%3E%3Ccircle cx='218.5' cy='112.8' r='1.48' fill-opacity='2.31'/%3E%3Ccircle cx='17.5' cy='151.1' r='1.28' fill-opacity='1.96'/%3E%3Ccircle cx='20.9' cy='79.8' r='1.46' fill-opacity='3.32'/%3E%3Ccircle cx='28.3' cy='59.1' r='0.60' fill-opacity='1.37'/%3E%3Ccircle cx='191.3' cy='42.6' r='1.06' fill-opacity='2.45'/%3E%3Ccircle cx='45.8' cy='175.7' r='0.63' fill-opacity='3.00'/%3E%3Ccircle cx='28.0' cy='101.0' r='0.71' fill-opacity='1.96'/%3E%3Ccircle cx='233.0' cy='192.8' r='0.80' fill-opacity='3.68'/%3E%3Ccircle cx='50.6' cy='94.6' r='1.35' fill-opacity='3.00'/%3E%3C/g%3E%3C/svg%3E");
  --ps-stars:480.00px 480.00px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .12 0 0 0 .10 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url%28%23n%29'/%3E%3C/svg%3E");
  --fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .09' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 1.5 -1.05'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url%28%23f%29'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#15110D;overscroll-behavior:none}
body{font-family:var(--en);color:#F3E7D2;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-tap-highlight-color:transparent}
img{display:block}
button{font:inherit}
:focus-visible{outline:2px solid #F2C879;outline-offset:3px}
.noscript{position:fixed;inset:auto 0 40% 0;text-align:center;font-size:20px;z-index:50}
.noscript a{color:#F2C879}

/* ═════════ the gallery wall ═════════ */
.wall{position:fixed;inset:0;z-index:0}
.wall__layer{
  --wl:color-mix(in srgb,var(--wc) 86%,#FFF0D6);
  position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;background-color:var(--wc,#1E2B45);
}
.wall__layer.on{opacity:1}
.wall__layer::before{content:'';position:absolute;inset:0;background-image:var(--pw);background-size:var(--psz)}
.wall__layer::after{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 55% 50% at 50% 46%,rgba(255,230,185,.20),transparent 72%),
    radial-gradient(ellipse 120% 90% at 50% 50%,transparent 45%,rgba(0,0,0,.55) 100%),
    var(--grain);
}
.wall__layer[data-p=asanoha]{--pw:var(--pw-asanoha);--psz:var(--ps-asanoha)}
.wall__layer[data-p=kikko]{--pw:var(--pw-kikko);--psz:var(--ps-kikko)}
.wall__layer[data-p=shippo]{--pw:var(--pw-shippo);--psz:var(--ps-shippo)}
.wall__layer[data-p=tatewaku]{--pw:var(--pw-tatewaku);--psz:var(--ps-tatewaku)}
.wall__layer[data-p=kanoko]{--pw:var(--pw-kanoko);--psz:var(--ps-kanoko)}
.wall__layer[data-p=ichimatsu]{--pw:var(--pw-ichimatsu);--psz:var(--ps-ichimatsu)}
.wall__layer[data-p=stars]{--pw:var(--pw-stars);--psz:var(--ps-stars)}
.wall__layer[data-p=seigaiha]::before{
  opacity:.55;
  background-image:
    radial-gradient(circle at 100% 150%,var(--wc) 24%,var(--wl) 24% 28%,var(--wc) 28% 36%,var(--wl) 36% 40%,transparent 40%),
    radial-gradient(circle at 0 150%,var(--wc) 24%,var(--wl) 24% 28%,var(--wc) 28% 36%,var(--wl) 36% 40%,transparent 40%),
    radial-gradient(circle at 50% 100%,var(--wl) 10%,var(--wc) 10% 23%,var(--wl) 23% 30%,var(--wc) 30% 43%,var(--wl) 43% 50%,var(--wc) 50% 63%,var(--wl) 63% 71%,transparent 71%),
    radial-gradient(circle at 100% 50%,var(--wl) 5%,var(--wc) 5% 15%,var(--wl) 15% 20%,var(--wc) 20% 29%,var(--wl) 29% 34%,var(--wc) 34% 44%,var(--wl) 44% 49%,transparent 49%),
    radial-gradient(circle at 0 50%,var(--wl) 5%,var(--wc) 5% 15%,var(--wl) 15% 20%,var(--wc) 20% 29%,var(--wl) 29% 34%,var(--wc) 34% 44%,var(--wl) 44% 49%,transparent 49%);
  background-size:110px 55px;
}
.motes{position:fixed;inset:0;z-index:1;pointer-events:none}

/* ═════════ chrome ═════════ */
.chrome{
  position:fixed;z-index:30;top:0;left:0;right:0;height:58px;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 clamp(14px,3vw,40px);
  font-size:15px;letter-spacing:.08em;color:rgba(250,238,218,.85);
}
.chrome a{color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;position:relative}
.chrome__mark b{font-family:var(--brush);font-weight:400;font-size:25px;color:#F2C879;margin-right:10px;letter-spacing:0}
.chrome__nav{display:flex;gap:clamp(14px,2.4vw,28px)}
.chrome__nav a::after,.ink-link::after{
  content:'';position:absolute;left:-4px;right:-6px;bottom:7px;height:10px;z-index:-1;
  background:currentColor;opacity:0;transition:opacity .35s;
  -webkit-mask:url(/assets/svg/brush.svg) center/100% 100% no-repeat;mask:url(/assets/svg/brush.svg) center/100% 100% no-repeat;
}
.chrome__nav a{z-index:0}
.chrome__nav a:hover::after{opacity:.35}

.hint{
  position:fixed;z-index:30;left:0;right:0;bottom:0;margin:0;height:46px;
  display:flex;align-items:center;justify-content:center;
  font-style:italic;font-size:15px;color:rgba(250,238,218,.72);letter-spacing:.03em;
  transition:opacity 1s ease;pointer-events:none;
}
.hint.gone{opacity:0}
.hint kbd{font-family:var(--en);font-style:normal;border:1px solid rgba(250,238,218,.4);border-radius:4px;padding:0 6px;margin:0 2px}
.hint__narrow{display:none}
.single .hint__wide{display:none}.single .hint__narrow{display:inline}

/* ═════════ the book ═════════ */
.stage{position:fixed;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:58px 0 46px}
.book-box{position:relative;flex:none}
.book-fit{position:absolute;left:0;top:0;transform-origin:0 0}
.book{
  position:absolute;left:46px;top:0;width:1200px;height:840px;
  transform:translateX(var(--shift,0px));
}
.single .book{left:0;top:0;width:600px}
.slot{position:absolute;top:0;width:600px;height:840px}
.slot--l{left:0}.slot--r{left:600px}
.single .slot--l{display:none}.single .slot--r{left:0}
.slot::after{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}
.turning .slot.has-page::after{opacity:var(--shade,0)}
.slot--l::after{background:linear-gradient(to left,rgba(25,12,0,.85),rgba(25,12,0,.25) 30%,transparent 70%)}
.slot--r::after{background:linear-gradient(to right,rgba(25,12,0,.85),rgba(25,12,0,.25) 30%,transparent 70%)}
.single .slot--r::after{background:linear-gradient(to left,rgba(25,12,0,.85),rgba(25,12,0,.25) 30%,transparent 70%)}
.book::after{
  content:'';position:absolute;left:592px;top:0;width:16px;height:840px;z-index:8;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(30,15,0,.28) 45%,rgba(30,15,0,.34) 50%,rgba(30,15,0,.28) 55%,transparent);
  opacity:0;transition:opacity .5s;
}
.book.is-open::after{opacity:1}
.single .book::after{display:none}

/* page corners: shown only when there is somewhere to go; the folded tip shows the next page */
.corner{
  --c:22px;
  position:absolute;bottom:0;z-index:20;width:120px;height:120px;padding:0;border:0;background:none;
  cursor:grab;touch-action:none;transition:opacity .3s;
}
.corner[hidden]{display:none}
.corner:active{cursor:grabbing}
.corner--next{left:0}.corner--prev{right:0}
.corner::before{
  content:'';position:absolute;bottom:0;width:var(--c);height:var(--c);
  transition:width .45s cubic-bezier(.3,1.4,.5,1),height .45s cubic-bezier(.3,1.4,.5,1);
}
.corner--next::before{left:0;background:linear-gradient(45deg,var(--under,#F4ECDA) 0 49%,var(--flap,#F4ECDA) 50%,color-mix(in srgb,var(--flap,#F4ECDA) 80%,#5a4628) 100%);box-shadow:4px -4px 7px -2px rgba(0,0,0,.35),inset 1px 1px 0 rgba(0,0,0,.08)}
.corner--prev::before{right:0;background:linear-gradient(-45deg,var(--under,#F4ECDA) 0 49%,var(--flap,#F4ECDA) 50%,color-mix(in srgb,var(--flap,#F4ECDA) 80%,#5a4628) 100%);box-shadow:-4px -4px 7px -2px rgba(0,0,0,.35),inset -1px 1px 0 rgba(0,0,0,.08)}
.corner:hover,.corner:focus-visible{--c:66px}
.corner.invite{animation:invite 2.8s ease-in-out infinite}
@keyframes invite{0%,100%{--c:22px}50%{--c:44px}}
@property --c{syntax:"<length>";inherits:true;initial-value:22px}
.turning .corner{opacity:0}
.turning .corner:not(.is-held){pointer-events:none}

/* index tabs: one column of bookmarks on the fore-edge (left side) */
.tabs{
  position:absolute;left:0;top:44px;width:46px;height:640px;
  display:flex;flex-direction:column;align-items:flex-end;gap:7px;
  transition:opacity .6s;
}
.single .tabs{display:none}
.is-closed-book .tabs{opacity:0;pointer-events:none}
.tab{
  width:36px;height:50px;border:0;border-radius:10px 0 0 10px;padding:0;
  background:var(--t);color:#FBF3E6;font-family:var(--jp);font-weight:700;font-size:17px;line-height:1;
  cursor:pointer;opacity:.75;transform:translateX(6px);
  box-shadow:inset 8px 0 10px -8px rgba(255,255,255,.25),inset -8px 0 10px -8px rgba(0,0,0,.5);
  transition:transform .4s cubic-bezier(.3,1.4,.5,1),opacity .3s,width .4s;
}
.tab:hover{transform:translateX(0);opacity:1}
.tab[aria-current]{width:46px;transform:none;opacity:1}

/* ═════════ the turning sheet: paper that folds along a moving line ═════════ */
.soft{position:absolute;left:0;top:0;width:1200px;height:840px;z-index:10;display:none;pointer-events:none}
.soft.is-on{display:block}
.soft__under{position:absolute;left:0;top:0;width:1200px;height:840px;overflow:hidden}
.soft__front{position:absolute;top:0;width:600px;height:840px;overflow:hidden}
.soft__backwrap{position:absolute;left:0;top:0;width:1200px;height:840px;filter:drop-shadow(0 0 16px rgba(20,10,0,.32)) drop-shadow(0 2px 3px rgba(20,10,0,.25))}
.soft__back{position:absolute;left:0;top:0;width:600px;height:840px;overflow:hidden;transform-origin:0 0}
.soft__back.blank{background-color:#F1E9D7;background-image:var(--fibers),var(--grain)}
.fstrip{position:absolute;left:0;top:0;width:4000px;transform-origin:0 0;pointer-events:none;z-index:9;opacity:var(--fi,0)}
.fstrip--under{height:170px;background:linear-gradient(to bottom,rgba(20,10,0,.62),rgba(20,10,0,.24) 22%,rgba(20,10,0,.06) 60%,transparent)}
.fstrip--front{height:120px;background:linear-gradient(to bottom,rgba(20,10,0,.26),rgba(20,10,0,.06) 40%,transparent)}
/* on the flap: a rolled edge (dark crease, bright crest, soft shade) and a long sheen */
.fstrip--roll{height:var(--roll,60px);background:linear-gradient(to bottom,rgba(40,22,5,.45) 0,rgba(40,22,5,.12) 14%,rgba(255,253,244,.85) 38%,rgba(255,253,244,.35) 58%,rgba(40,22,5,.18) 84%,rgba(40,22,5,.05) 100%)}
.fstrip--back{height:420px;background:linear-gradient(to bottom,transparent 0,transparent 12%,rgba(255,250,235,.20) 20%,rgba(40,22,5,.10) 55%,transparent 100%)}

/* ═════════ pages: shared ═════════ */
.pg{
  --paper:#F4ECDA;
  position:relative;width:600px;height:840px;overflow:hidden;
  background-color:var(--paper);background-image:var(--fibers),var(--grain);
  color:var(--ink);font-family:var(--en);font-size:20.5px;line-height:1.55;text-align:left;
}
.pg p,.pg h1,.pg h2,.pg h3,.pg figure{margin:0}
.pg::before,.pg::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:6}
.pg[data-side=l]::before{background:linear-gradient(to left,rgba(70,45,15,.26),rgba(70,45,15,.07) 5%,transparent 13%),linear-gradient(to right,rgba(70,45,15,.10),transparent 2.5%)}
.pg[data-side=r]::before{background:linear-gradient(to right,rgba(70,45,15,.26),rgba(70,45,15,.07) 5%,transparent 13%),linear-gradient(to left,rgba(70,45,15,.10),transparent 2.5%)}
.single .pg::before{background:linear-gradient(to left,rgba(70,45,15,.22),rgba(70,45,15,.06) 5%,transparent 12%),linear-gradient(to right,rgba(70,45,15,.10),transparent 2.5%)}
.pg::after{background:radial-gradient(ellipse 75% 70% at 50% 48%,transparent 60%,rgba(140,95,35,.13) 100%)}

.pg[data-ch=leaving]{--accent:var(--a-leaving);--paper:#EDEFE8;--pm:var(--pk-tatewaku);--pms:var(--ps-tatewaku)}
.pg[data-ch=table]{--accent:var(--a-table);--paper:#F6EBDA;--pm:var(--pk-kikko);--pms:var(--ps-kikko)}
.pg[data-ch=sky]{--accent:var(--a-sky);--paper:#F4E7DF;--pm:var(--pk-stars);--pms:var(--ps-stars)}
.pg[data-ch=garden]{--accent:var(--a-garden);--paper:#EDEFDF;--pm:var(--pk-asanoha);--pms:var(--ps-asanoha)}
.pg[data-ch=road]{--accent:var(--a-road);--paper:#EAEFEA;--pm:var(--pk-shippo);--pms:var(--ps-shippo)}
.pg[data-ch=market]{--accent:var(--a-market);--paper:#F7E9E4;--pm:var(--pk-kanoko);--pms:var(--ps-kanoko)}
.pg[data-ch=play]{--accent:var(--a-play);--paper:#EFEAF2;--pm:var(--pk-ichimatsu);--pms:var(--ps-ichimatsu)}
.pg[data-ch=desk]{--accent:var(--a-desk);--paper:#EDECE4;--pm:var(--pk-kikko);--pms:var(--ps-kikko)}
.pg[data-ch=envoi]{--accent:var(--a-envoi);--paper:#F6E8D6;--pm:var(--pk-asanoha);--pms:var(--ps-asanoha)}

.pg__band{
  position:absolute;left:0;right:0;bottom:0;height:200px;z-index:0;pointer-events:none;
  background:var(--accent);opacity:.13;
  -webkit-mask-image:var(--pm),linear-gradient(to top,#000 0,transparent 100%);
  -webkit-mask-size:var(--pms),100% 100%;
  -webkit-mask-composite:source-in;
  mask-image:var(--pm),linear-gradient(to top,#000 0,transparent 100%);
  mask-size:var(--pms),100% 100%;
  mask-composite:intersect;
}
.pg__no{
  position:absolute;bottom:28px;z-index:2;display:flex;align-items:center;gap:10px;
  font-family:var(--jp);font-size:15px;color:var(--ink-3);letter-spacing:.1em;
}
.pg[data-side=r] .pg__no{right:46px;flex-direction:row-reverse}
.pg[data-side=l] .pg__no{left:46px}
.pg__no::before{
  content:'';width:30px;height:8px;background:var(--accent);opacity:.65;
  -webkit-mask:url(/assets/svg/brush.svg) center/100% 100% no-repeat;mask:url(/assets/svg/brush.svg) center/100% 100% no-repeat;
}

/* brush separator: a vermilion sun and one stroke of ink */
.sep{display:flex;align-items:center;gap:10px;height:24px;width:300px}
.sep__sun{flex:none;width:15px;height:15px;border-radius:50%;background:var(--shu);transform:scale(0);filter:url(#rough)}
.sep svg{width:272px;height:22px;color:var(--accent);filter:url(#rough);clip-path:inset(0 100% 0 0)}
.is-in .sep__sun{transform:scale(1);transition:transform .6s cubic-bezier(.3,1.7,.5,1) .15s}
.is-in .sep svg{clip-path:inset(0 0 0 0);transition:clip-path 1.2s cubic-bezier(.65,.05,.3,1) .35s}

/* ensō */
.enso{color:var(--accent)}
.enso path{fill:none;stroke:currentColor;stroke-width:6.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;filter:url(#rough)}
.is-in .enso path{stroke-dashoffset:4;transition:stroke-dashoffset 1.5s cubic-bezier(.6,.1,.3,1) .1s}

/* seal (hanko) */
.seal{
  width:54px;height:54px;flex:none;display:grid;place-items:center;
  background:var(--shu);color:#FBF2E4;border-radius:6px;
  font-family:var(--brush);font-size:31px;line-height:1;
  box-shadow:inset 0 0 0 4px var(--shu),inset 0 0 0 6px rgba(251,242,228,.92);
  filter:url(#rough);mix-blend-mode:multiply;
  opacity:0;transform:scale(1.6) rotate(-12deg);
}
.is-in .seal{opacity:.92;transform:rotate(-4deg);transition:opacity .2s ease .8s,transform .5s cubic-bezier(.2,1.5,.4,1) .8s}

/* ink links */
.links{display:flex;flex-direction:column;align-items:flex-start}
.ink-link{position:relative;z-index:0;display:inline-flex;align-items:center;min-height:42px;font-style:italic;color:var(--ink);text-decoration:none}
.ink-link::after{background:var(--accent);opacity:.35}
.ink-link:hover::after{opacity:.75}
.ink-link .arr{font-style:normal;margin-left:.45em;transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.ink-link:hover .arr{transform:translateX(6px)}

.sumi-btn{
  align-self:flex-start;min-height:50px;padding:0 30px;border:0;cursor:pointer;
  font-family:var(--en);font-size:19px;letter-spacing:.06em;color:#FBF3E6;
  background:var(--ink);border-radius:3px;filter:url(#rough);
  transition:background .3s,transform .3s;
}
.sumi-btn:hover{background:var(--shu);transform:translateY(-2px)}
.sumi-btn--light{background:#EFE3C8;color:var(--ink)}
.sumi-btn--light:hover{background:#F2C879;color:var(--ink)}

/* ═════════ chapter text pages ═════════ */
.tp-title{position:absolute;top:56px;right:46px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px}
.enso-n{position:relative;width:72px;height:72px;display:grid;place-items:center}
.enso-n .enso{position:absolute;inset:0;width:100%;height:100%}
.enso-n span{position:relative;font-family:var(--brush);font-size:30px;line-height:1;color:var(--ink)}
.tp-kanji{
  font-family:var(--brush);font-weight:400;font-size:100px;line-height:1.04;letter-spacing:.02em;
  writing-mode:vertical-rl;color:var(--ink);opacity:.18;filter:blur(4px);
}
.is-in .tp-kanji{opacity:1;filter:none;transition:opacity 1.4s ease .05s,filter 1.4s ease .05s}
.tp-body{position:absolute;left:56px;top:150px;width:352px;z-index:2;display:flex;flex-direction:column;gap:16px}
.kicker{font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);font-weight:500}
.tp-en{font-family:var(--display);font-weight:600;font-size:56px;line-height:1;letter-spacing:-.005em;margin:0}
.tp-en--long{font-size:46px;line-height:1.02}
.tp-body p:not(.lead):not(.kicker):not(.links){color:var(--ink-2)}
.lead{font-size:25px;line-height:1.34;color:var(--ink)}
.lead::first-letter{font-family:var(--display);font-weight:600;font-size:3.3em;float:left;line-height:.78;padding:.08em .1em 0 0;color:var(--accent)}

/* ═════════ title page ═════════ */
.tt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;padding:70px 60px 0;text-align:center}
.tt__jp{font-family:var(--jp);font-size:16px;letter-spacing:.6em;color:var(--ink-3)}
.tt__k-wrap{position:relative;width:300px;height:290px;display:grid;place-items:center;margin-top:6px}
.enso--big{position:absolute;inset:0;width:100%;height:100%;color:var(--shu);opacity:.55}
.enso--big path{stroke-width:4.5}
.tt__k{position:relative;font-family:var(--brush);font-weight:400;font-size:200px;line-height:1;color:var(--ink);margin:0}
.tt .seal{position:absolute;right:-4px;bottom:26px}
.tt__name{font-family:var(--display);font-weight:600;font-size:48px;line-height:1.05;margin-top:18px}
.tt__sub{font-style:italic;font-size:21px;color:var(--ink-2);max-width:390px;margin-top:10px;line-height:1.4}
.tt .sep{margin:22px auto 18px}
.tt__q{font-style:italic;font-size:19px}
.tt__src{font-size:14px;letter-spacing:.06em;color:var(--ink-3);margin-top:6px}

/* ═════════ contents ═════════ */
.toc-head{position:absolute;top:54px;right:44px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.toc-head h2{font-family:var(--brush);font-weight:400;font-size:56px;line-height:1;letter-spacing:.22em;writing-mode:vertical-rl;margin:0;color:var(--ink)}
.toc-head__en{writing-mode:vertical-rl;font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--shu)}
.toc{position:absolute;top:56px;bottom:112px;left:38px;width:430px;margin:0;padding:0;list-style:none;display:flex;flex-direction:row-reverse;justify-content:space-between;z-index:2}
.toc li{width:50px;height:100%}
.toc a{height:100%;display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 0 10px;border-radius:26px;text-decoration:none;color:var(--ink);transition:background .35s}
.toc a:hover,.toc a:focus-visible{background:color-mix(in srgb,var(--c) 12%,transparent)}
.toc__n{font-family:var(--jp);font-weight:700;font-size:15px;color:var(--c)}
.toc__jp{font-family:var(--brush);font-size:36px;line-height:1.04;writing-mode:vertical-rl;transition:color .3s}
.toc a:hover .toc__jp{color:var(--c)}
.toc__img{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--c);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.toc a:hover .toc__img{transform:scale(1.22)}
.toc__lead{flex:1;width:3px;opacity:.55;background:radial-gradient(circle,var(--ink-3) 1.1px,transparent 1.5px) 0 0/3px 10px repeat-y}
.toc__en{writing-mode:vertical-rl;font-style:italic;font-size:15.5px;color:var(--ink-2);white-space:nowrap}
.toc__p{font-family:var(--jp);font-size:14px;color:var(--ink-3);writing-mode:vertical-rl}
.toc-note{position:absolute;left:46px;right:130px;bottom:66px;z-index:2;font-style:italic;font-size:16px;color:var(--ink-3)}

/* ═════════ cloth covers ═════════ */
.pg--cloth{
  --paper:#22314F;
  background-color:#22314F;
  background-image:
    radial-gradient(ellipse 80% 60% at 35% 30%,rgba(255,255,255,.07),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px),
    var(--grain);
  color:#F2E6CF;
}
.pg--cloth::before{background:linear-gradient(to left,rgba(0,0,0,.35),transparent 9%)}
.pg--back::before{background:linear-gradient(to right,rgba(0,0,0,.35),transparent 9%)}
.pg--cloth::after{background:radial-gradient(ellipse at 50% 50%,transparent 60%,rgba(0,0,0,.35) 100%)}
.stitch{position:absolute;inset:0;z-index:3;width:600px;height:840px}
.stitch__thread path{fill:none;stroke:#EADCBC;stroke-width:3.2;stroke-linecap:round}
.stitch__hole circle{fill:#0E1526;stroke:#EADCBC;stroke-width:1.5}
.kadogire{position:absolute;width:40px;height:40px;z-index:2;background:#3B2A1C;background-image:radial-gradient(circle,rgba(232,200,120,.6) 1.2px,transparent 1.6px);background-size:8px 8px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.4)}
.daisen{
  position:absolute;left:44px;top:44px;width:86px;height:332px;z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 0 14px;
  background-color:#F1E7D0;background-image:var(--fibers),var(--grain);color:var(--ink);
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.35);
  outline:1px solid rgba(34,26,19,.35);outline-offset:-7px;
}
.daisen b{font-family:var(--brush);font-weight:400;font-size:62px;line-height:1}
.daisen span{writing-mode:vertical-rl;font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:.14em}
.fan{position:absolute;inset:0;z-index:2;width:600px;height:840px}
.fan__ribs path{stroke:rgba(255,245,220,.22);stroke-width:1}
.fan__edge{fill:none;stroke:#D9B867;stroke-width:3}
.cover__sub{position:absolute;left:30px;right:70px;top:628px;z-index:3;text-align:center;font-family:var(--display);font-style:italic;font-weight:500;font-size:25px;color:#EADCC0}
.seal--cover{position:absolute;left:258px;top:700px;z-index:3;mix-blend-mode:normal}
.colophon{
  position:absolute;left:120px;right:80px;top:150px;z-index:3;
  padding:34px 34px 30px;text-align:center;
  background-color:#F1E7D0;background-image:var(--fibers),var(--grain);color:var(--ink);
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.35);
  outline:1px solid rgba(34,26,19,.35);outline-offset:-8px;
  display:flex;flex-direction:column;align-items:center;gap:14px;font-size:19px;line-height:1.45;
}
.colophon__k{font-family:var(--brush);font-size:96px;line-height:1}
.colophon__small{font-size:15px;color:var(--ink-3)}
.pg--back .sumi-btn{position:absolute;left:50%;transform:translateX(-50%);top:640px;z-index:3}
.pg--back .sumi-btn:hover{transform:translateX(-50%) translateY(-2px)}

/* ═════════ plates: photographs tipped into the book ═════════ */
.pg figure{position:absolute;z-index:2}
.ph{position:relative;width:100%;height:100%;overflow:hidden;background:#D9CFBC}
.ph img{width:100%;height:100%;object-fit:cover}
.pg img[data-title]{cursor:zoom-in}
.kb img{transition:transform 16s ease-out}
.is-in .kb img{transform:scale(1.09)}
.mount{
  background:#FFFDF7;padding:14px;transform:rotate(var(--r,0deg));
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 2px 3px rgba(40,25,10,.18),0 20px 34px -16px rgba(40,25,10,.6);
}
.corners::after{
  content:'';position:absolute;inset:5px;pointer-events:none;z-index:2;
  background:
    linear-gradient(135deg,#2B2622 0 50%,transparent 50%) top left/30px 30px no-repeat,
    linear-gradient(225deg,#2B2622 0 50%,transparent 50%) top right/30px 30px no-repeat,
    linear-gradient(45deg,#2B2622 0 50%,transparent 50%) bottom left/30px 30px no-repeat,
    linear-gradient(315deg,#2B2622 0 50%,transparent 50%) bottom right/30px 30px no-repeat;
}
.polaroid{
  background:#FFFEFA;padding:10px 10px 40px;transform:rotate(var(--r,0deg));
  box-shadow:0 2px 3px rgba(40,25,10,.18),0 18px 30px -16px rgba(40,25,10,.55);
}
.polaroid figcaption{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-family:var(--display);font-style:italic;font-size:18px;color:var(--ink-2)}
.label{
  position:absolute;z-index:3;background:#FFFDF8;padding:12px 16px 13px;
  font-size:15.5px;line-height:1.4;color:var(--ink-2);
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 8px 14px -8px rgba(0,0,0,.3);
}
.label b{display:block;font-family:var(--jp);font-weight:500;font-size:12.5px;letter-spacing:.16em;color:var(--accent);margin-bottom:2px}
.label i{color:var(--ink)}
.label small{display:block;font-size:14px;color:var(--ink-3);margin-top:2px}
.label--c{text-align:center}
.caption{position:absolute;left:60px;right:60px;z-index:3;text-align:center;font-size:16px;color:var(--ink-2)}
.tape{
  position:absolute;width:110px;height:30px;z-index:4;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(214,112,140,.62) 0 9px,rgba(255,255,255,.4) 9px 13px);
  transform:rotate(var(--tr,-6deg));opacity:.86;
  clip-path:polygon(0 0,100% 0,96% 20%,100% 40%,96% 60%,100% 80%,96% 100%,0 100%,4% 80%,0 60%,4% 40%,0 20%);
}
.tape--b{background:repeating-linear-gradient(90deg,rgba(120,170,150,.6) 0 7px,rgba(255,255,255,.45) 7px 10px)}
.tape--c{background:radial-gradient(circle,rgba(200,80,60,.6) 2px,transparent 2.5px) 0 0/9px 9px,rgba(245,215,160,.75)}

/* leaving: airplane windows */
.win{
  border-radius:120px;padding:16px;
  background:linear-gradient(150deg,#F5F1E8,#D8D1C2);
  box-shadow:0 1px 0 #fff inset,0 -2px 0 rgba(0,0,0,.08) inset,0 22px 36px -18px rgba(20,30,40,.55);
}
.win--sm{border-radius:72px;padding:12px}
.win--md{border-radius:96px;padding:14px}
.win .ph{border-radius:104px}
.win--sm .ph{border-radius:62px}
.win--md .ph{border-radius:84px}
.win .ph::after{content:'';position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 10px 22px rgba(0,0,0,.38),inset 0 0 0 2px rgba(0,0,0,.18);pointer-events:none}
.route{position:absolute;inset:0;z-index:1;width:600px;height:840px;pointer-events:none}
.route__line{fill:none;stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:.1 11;opacity:.75}
.is-in .route__line{animation:march 3.5s linear infinite}
@keyframes march{to{stroke-dashoffset:-22.2}}
.route__plane{fill:var(--accent)}
.route--road circle{fill:var(--shu);stroke:var(--paper);stroke-width:3}

/* table: a lacquer tray of bowls */
.tray{
  position:absolute;left:64px;top:58px;width:472px;height:472px;z-index:2;padding:26px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;border-radius:22px;
  background:radial-gradient(ellipse at 38% 28%,#7E2617,#3A0D07 78%);
  box-shadow:inset 0 0 0 3px #A1402A,inset 0 0 0 7px #260704,inset 0 14px 30px rgba(0,0,0,.5),0 28px 40px -22px rgba(40,10,0,.75);
}
.bowl{border-radius:50%;padding:6px;background:radial-gradient(circle,#FFFDF6 60%,#E6DCC8);box-shadow:0 9px 14px -6px rgba(0,0,0,.65);transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.bowl:hover{transform:scale(1.08) rotate(8deg)}
.bowl img{width:100%;height:100%;border-radius:50%;object-fit:cover;transition:opacity .5s ease}

/* sky: a gilt frame that shows four evenings in turn */
.gilt{
  position:absolute;z-index:2;padding:20px;background:#FBF6EA;
  border:14px solid transparent;border-image:linear-gradient(135deg,#8C6A2B,#E8CF86 25%,#9A7630 50%,#E3C676 75%,#7E5E24) 1;
  box-shadow:0 26px 40px -22px rgba(30,15,0,.7),0 2px 4px rgba(0,0,0,.25);
}
.flip img{position:absolute;inset:0;opacity:0}
.flip img:first-child{opacity:1}
.is-in .flip img{animation:flip 24s infinite}
.is-in .flip img:nth-child(2){animation-delay:6s}
.is-in .flip img:nth-child(3){animation-delay:12s}
.is-in .flip img:nth-child(4){animation-delay:18s}
@keyframes flip{0%{opacity:0;transform:scale(1.08)}5%{opacity:1}25%{opacity:1}30%{opacity:0;transform:scale(1)}100%{opacity:0}}
.is-in .flip img:first-child{animation-name:flip1}
@keyframes flip1{0%{opacity:1;transform:scale(1.04)}25%{opacity:1}30%{opacity:0;transform:scale(1)}95%{opacity:0;transform:scale(1.08)}100%{opacity:1;transform:scale(1.08)}}
.flip-dots{position:absolute;left:0;right:0;top:636px;z-index:2;display:flex;justify-content:center;gap:12px}
.flip-dots i{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.25}
.is-in .flip-dots i{animation:dot 24s infinite}
.is-in .flip-dots i:nth-child(2){animation-delay:6s}
.is-in .flip-dots i:nth-child(3){animation-delay:12s}
.is-in .flip-dots i:nth-child(4){animation-delay:18s}
@keyframes dot{0%,25%{opacity:1;transform:scale(1.3)}30%,100%{opacity:.25;transform:none}}
.pg--sky{background-image:radial-gradient(circle at 12% 18%,rgba(201,160,70,.9) 1.4px,transparent 2px),radial-gradient(circle at 84% 9%,rgba(201,160,70,.9) 1.2px,transparent 1.8px),radial-gradient(circle at 92% 74%,rgba(201,160,70,.9) 1.4px,transparent 2px),radial-gradient(circle at 7% 66%,rgba(201,160,70,.8) 1px,transparent 1.6px),var(--fibers),var(--grain)}

/* garden: a hanging scroll (kakejiku) */
.scroll{position:absolute;z-index:2;transform-origin:50% -40px;animation:sway 9s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.scroll__cord{position:absolute;left:50%;top:-38px;width:120px;height:40px;margin-left:-60px;overflow:visible}
.scroll__cord path{fill:none;stroke:#6B4A2A;stroke-width:2}
.scroll__cord circle{fill:#3A2414}
.scroll__rod{height:12px;margin:0 -6px;border-radius:6px;background:linear-gradient(#6A4528,#2B1A0E);box-shadow:0 2px 3px rgba(0,0,0,.35);position:relative;z-index:2}
.scroll__body{
  position:relative;padding:100px 24px 80px;
  background-color:#33503F;
  background-image:radial-gradient(circle,rgba(226,196,120,.55) 1.3px,transparent 1.7px),linear-gradient(45deg,rgba(255,255,255,.05) 25%,transparent 25% 75%,rgba(255,255,255,.05) 75%);
  background-size:12px 12px,12px 12px;
  box-shadow:0 30px 40px -24px rgba(0,0,0,.6),inset 0 0 0 1px rgba(0,0,0,.25);
}
.scroll__futai{position:absolute;top:0;width:16px;height:96px;margin-left:-8px;background:#24382C;box-shadow:inset 2px 0 0 rgba(226,196,120,.5),inset -2px 0 0 rgba(226,196,120,.5)}
.scroll__mount{padding:8px;background:#EFE5CC;border-top:10px solid #C7A458;border-bottom:10px solid #C7A458;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.scroll__jiku{position:relative;height:20px;margin:0 -10px;border-radius:4px;background:linear-gradient(#4A2E19,#1D0F06);box-shadow:0 4px 6px rgba(0,0,0,.4)}
.scroll__jiku::before,.scroll__jiku::after{content:'';position:absolute;top:-3px;width:18px;height:26px;border-radius:5px;background:linear-gradient(#2A1A0E,#0E0703);box-shadow:inset 0 2px 0 rgba(255,255,255,.15)}
.scroll__jiku::before{left:-14px}.scroll__jiku::after{right:-14px}

/* play: shikishi boards with gilt edges */
.shikishi{
  width:240px;height:240px;padding:12px;background:#FBF6EA;transform:rotate(var(--r,0deg));
  border:5px solid transparent;border-image:linear-gradient(135deg,#B8923A,#F1D88A 30%,#A47B2A 55%,#E8C978 80%,#9C7426) 1;
  box-shadow:0 2px 3px rgba(40,25,10,.2),0 20px 30px -16px rgba(40,25,10,.6);
  transition:transform .5s cubic-bezier(.3,1.4,.5,1);
}
.shikishi:hover{transform:rotate(0) scale(1.04);z-index:5}

/* desk: a museum vitrine */
.vitrine{
  position:absolute;z-index:2;padding:30px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.95);
  box-shadow:inset 0 0 0 1px rgba(60,50,40,.22),0 30px 40px -26px rgba(0,0,0,.55);
}
.vitrine .ph{box-shadow:0 10px 20px -8px rgba(0,0,0,.4)}
.vitrine::after{
  content:'';position:absolute;inset:-20%;pointer-events:none;
  background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.5) 50%,transparent 58%);
  transform:translateX(-80%);
}
.is-in .vitrine::after{animation:sheen 8s ease-in-out 1s infinite}
@keyframes sheen{0%{transform:translateX(-80%)}35%,100%{transform:translateX(80%)}}
.vitrine__base{position:absolute;z-index:1;height:30px;background:linear-gradient(#4A3423,#24170D);box-shadow:0 14px 20px -10px rgba(0,0,0,.6)}

/* ═════════ single page (phones, narrow windows) ═════════ */
.single .stage{padding:56px 0 40px}

/* ═════════ gallery view ═════════ */
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;color:var(--ink)}
.lb::backdrop{background:rgba(14,10,7,.92)}
.lb[open]{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:center;gap:44px;padding:5vh 6vw}
.lb__fig{margin:0;display:grid;place-items:center;min-height:0}
.lb__mat{background:#FBF7EE;padding:18px;box-shadow:0 34px 70px -24px rgba(0,0,0,.9)}
.lb[open] .lb__mat{animation:lbIn .55s cubic-bezier(.2,.8,.2,1)}
@keyframes lbIn{from{opacity:0;transform:translateY(24px) scale(.97)}}
.lb__mat img{max-width:min(58vw,980px);max-height:80vh;width:auto;height:auto}
.lb__label:focus{outline:none}
.lb__label{background:#FBF7EE;padding:22px 24px;font-size:17px;line-height:1.45;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
.lb__label p{margin:0}
.lb__no{font-family:var(--jp);font-size:13px;letter-spacing:.18em;color:var(--shu)}
.lb__title{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;margin:6px 0 8px!important}
.lb__note{color:var(--ink-3);font-size:15.5px}
.lb__nav{display:flex;gap:10px;margin-top:18px}
.lb__btn{min-height:44px;padding:0 14px;cursor:pointer;background:none;border:1px solid rgba(34,26,19,.3);color:var(--ink);border-radius:3px}
.lb__btn:hover{border-color:var(--shu);color:var(--shu)}
.lb__help{font-size:13.5px;color:var(--ink-3);margin-top:12px!important;font-style:italic}
.lb__close{position:fixed;top:14px;right:18px;width:48px;height:48px;border:0;background:none;color:#F3E7D2;font-size:34px;line-height:1;cursor:pointer}
@media (max-width:760px){
  .lb[open]{grid-template-columns:1fr;grid-template-rows:auto auto;gap:18px;padding:64px 16px 20px;align-content:center}
  .lb__mat{padding:10px}
  .lb__mat img{max-width:88vw;max-height:56vh}
  .lb__label{padding:16px 18px}
  .lb__help{display:none}
}

@media (prefers-reduced-motion:reduce){
  .soft__backwrap{filter:none}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .seal{opacity:.92;transform:rotate(-4deg)}
}

/* ═════════ two editions: 日本語 (default) and English ═════════ */
html[lang=ja] .en{display:none!important}
html:not([lang=ja]) .ja{display:none!important}
.lang-toggle{
  min-height:36px;min-width:44px;padding:0 12px;margin-left:4px;cursor:pointer;
  background:transparent;color:inherit;border:1px solid rgba(250,238,218,.45);border-radius:999px;
  font-family:var(--jp);font-size:14px;letter-spacing:.06em;transition:background .3s,border-color .3s;
}
.lang-toggle:hover{background:rgba(250,238,218,.12);border-color:rgba(250,238,218,.8)}
html[lang=ja] .chrome,html[lang=ja] .hint{font-family:var(--jp);letter-spacing:.06em}
html[lang=ja] .hint{font-style:normal;font-size:14px}
.chrome__nav{align-items:center}

/* vertical Japanese text pages (tategaki) */
.tp-ja{
  position:absolute;top:130px;bottom:78px;left:40px;right:158px;z-index:2;
  writing-mode:vertical-rl;display:flex;flex-direction:column;align-items:flex-start;gap:18px;
  font-family:var(--jp);font-size:18.5px;line-height:1.85;color:var(--ink-2);letter-spacing:.04em;
}
.tp-ja p{margin:0}
.tp-ja .lead{font-family:var(--jp);font-weight:500;font-size:23px;line-height:1.75;color:var(--ink)}
.tp-ja .lead::first-letter{font:inherit;float:none;padding:0;color:var(--accent)}
.tp-ja .lead--big{font-size:28px;line-height:1.6}
.sep--v{writing-mode:horizontal-tb;flex-direction:column;width:24px;height:300px;gap:10px}
.sep--v svg{width:22px;height:272px;clip-path:inset(0 0 100% 0)}
.is-in .sep--v svg{clip-path:inset(0 0 0 0)}
.tp-ja .links{display:flex;flex-direction:column;gap:2px}
.tp-ja .ink-link{font-style:normal;min-height:0;min-width:40px;justify-content:flex-start}
.tp-ja .ink-link::after{left:auto;right:auto;bottom:-6px;top:-4px;left:2px;height:auto;width:9px;
  -webkit-mask:url(/assets/svg/brush-v.svg) center/100% 100% no-repeat;mask:url(/assets/svg/brush-v.svg) center/100% 100% no-repeat}
.tp-ja .ink-link .arr{margin:.4em 0 0}
.tp-ja .sumi-btn{writing-mode:vertical-rl;min-height:0;min-width:50px;padding:24px 0;font-family:var(--jp);letter-spacing:.2em}
html[lang=ja] .label{font-family:var(--jp);font-size:14.5px;line-height:1.55}
html[lang=ja] .label i{font-style:normal}
html[lang=ja] .label b{letter-spacing:.2em}
html[lang=ja] .caption{font-family:var(--jp);font-size:15px}
html[lang=ja] .caption i{font-style:normal}
html[lang=ja] .polaroid figcaption{font-family:var(--jp);font-style:normal;font-size:15px}
.toc__en.ja{font-family:var(--jp);font-style:normal;font-size:14.5px;letter-spacing:.08em}
html[lang=ja] .toc-note,html[lang=ja] .cover__sub,html[lang=ja] .colophon,html[lang=ja] .tt__src{font-family:var(--jp);font-style:normal}
html[lang=ja] .cover__sub{font-size:21px;letter-spacing:.12em}
.daisen .ja{writing-mode:vertical-rl;font-family:var(--jp);font-weight:700;font-size:18px;letter-spacing:.18em}
.tt__name .ja{font-family:var(--jp);font-weight:700;font-size:36px;letter-spacing:.08em}
.tt__sub .ja{font-family:var(--jp);font-style:normal;font-size:17.5px;line-height:1.8;display:block}
.tt__q.ja{font-family:var(--jp);font-style:normal;font-size:17px;margin-top:6px;letter-spacing:.08em}
html[lang=ja] .tt__src{font-size:13.5px}
html[lang=ja] .lb__label{font-family:var(--jp)}
html[lang=ja] .lb__title{font-family:var(--jp);font-size:24px}
html[lang=ja] .sumi-btn--light{font-family:var(--jp);letter-spacing:.15em}
.pg--envoi .tp-ja{gap:13px}
.pg--envoi .tp-ja .lead--big{font-size:26px}
.chrome a,.chrome button{white-space:nowrap}
.daisen .ja{font-size:15px;letter-spacing:.06em}
@media (max-width:560px){
  .chrome__mark .en,.chrome__mark .ja{display:none!important}
  .chrome__nav{gap:14px}
  .chrome{font-size:14px}
}
/* flat sheet, not a tube: one soft shadow from the fold, no bright crest */
.fstrip--roll{display:none}
.fstrip--back{height:300px;background:linear-gradient(to bottom,rgba(40,22,5,.24) 0,rgba(40,22,5,.10) 14%,rgba(40,22,5,.03) 45%,transparent 75%)}
.fstrip--front{height:70px;background:linear-gradient(to bottom,rgba(20,10,0,.14),transparent)}

.pg--back .sumi-btn--pile{position:absolute;left:50%;transform:translateX(-50%);top:706px;z-index:3;display:inline-flex;align-items:center;text-decoration:none;background:transparent;color:#EFE3C8;box-shadow:inset 0 0 0 1px rgba(239,227,200,.6);filter:none;white-space:nowrap}
.pg--back .sumi-btn--pile:hover{transform:translateX(-50%) translateY(-2px);background:rgba(239,227,200,.12)}
html[lang=ja] .sumi-btn--pile{font-family:var(--jp);letter-spacing:.15em}