/* 年輪 — a picture scroll (emakimono) lying open on the tatami.
   Wide screens: it unrolls from right to left between two rollers. Tall screens: from top to bottom. */
:root{
  --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',serif;
  --ink:#2A2218; --shu:#B8321C; --wood:#6E4A2A; --gold:#D9B867;
  --ph:min(640px,calc(100vh - 200px));          /* the height of the paper */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%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 .13 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .08' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 0 0 0 1.4 -1'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23f)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
body{color:var(--ink);font-family:var(--en);-webkit-font-smoothing:antialiased;
  background:#B7A56C;background-image:
    linear-gradient(180deg,rgba(255,240,210,.35),transparent 40%,rgba(40,28,16,.25)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,rgba(90,76,40,.12) 2px 4px),
    linear-gradient(180deg,transparent 0 calc(100% - 22px),#2E3A2C calc(100% - 22px)),var(--grain)}
html[lang=ja] .en,html:not([lang=ja]) .ja{display:none!important}
:focus-visible{outline:2px solid var(--shu);outline-offset:3px}

.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-family:var(--jp);font-size:15px;letter-spacing:.08em;color:#2E2418}
.chrome a,.chrome button{white-space:nowrap}
.chrome a{color:inherit;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.chrome__mark b{font-family:var(--brush);font-weight:400;font-size:25px;color:var(--shu);margin-right:10px}
.chrome__nav{display:flex;align-items:center;gap:20px}
.lang-toggle{min-height:36px;min-width:44px;padding:0 12px;cursor:pointer;background:transparent;color:inherit;border:1px solid rgba(46,36,24,.5);border-radius:999px;font-family:var(--jp);font-size:14px}
@media (max-width:480px){.chrome__mark>span{display:none}}

/* ═════════ the closed scroll ═════════
   Closed, the scroll is the same object as open: its two rollers at full height, with the silk
   cover, title slip (daisen) and cord on the outside. It moves to where it starts, then the roller
   holding the paper travels away and the paper is left lying open. */
.desk{position:fixed;inset:58px 0 92px;display:flex;align-items:center;justify-content:center}
.rolled{position:absolute;left:50%;bottom:-58px;transform:translateX(-50%);min-height:44px;border:0;background:none;cursor:pointer;padding:6px 18px;transition:opacity .4s}
.rolled__hint{font-family:var(--jp);font-size:15px;letter-spacing:.3em;color:#2E2418}
html:not([lang=ja]) .rolled__hint{font-family:var(--display);font-style:italic;letter-spacing:.05em;font-size:18px}
.is-open .rolled{opacity:0;pointer-events:none}
.scroll.is-rolled{cursor:pointer}
.scroll.is-rolled:hover .roll{filter:brightness(1.06)}
.hyoshi{position:absolute;inset:0;border-radius:inherit;opacity:var(--cover,0);pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%,rgba(0,0,0,.4)),
    repeating-linear-gradient(0deg,#3B2A4A 0 14px,#4F3A60 14px 16px,#3B2A4A 16px 30px,#C9A24B 30px 32px)}
.daisen{position:absolute;left:50%;top:14%;transform:translateX(-50%);z-index:2;width:34px;padding:12px 0;writing-mode:vertical-rl;text-align:center;
  background:#F6EEDC;box-shadow:inset 0 0 0 2px var(--gold),0 1px 3px rgba(0,0,0,.3);font-family:var(--brush);font-size:24px;letter-spacing:.3em;color:var(--ink);opacity:var(--cover,0);pointer-events:none}
.himo{position:absolute;left:-4px;right:-4px;top:58%;height:10px;z-index:2;border-radius:3px;background:repeating-linear-gradient(45deg,#7A1F2C 0 4px,#B8321C 4px 8px);box-shadow:0 2px 3px rgba(0,0,0,.3);opacity:var(--cover,0);pointer-events:none}
.roll--b .daisen,.roll--b .himo,.port .roll--a .daisen,.port .roll--a .himo{display:none}
.port .roll--b .daisen,.port .roll--b .himo{display:block}

/* ═════════ the open scroll ═════════ */
.scroll{position:relative;display:flex;align-items:stretch;justify-content:flex-end;width:100%;height:calc(var(--ph) + 60px);padding:0 10px;filter:drop-shadow(0 22px 22px rgba(40,26,12,.35))}
.window{position:relative;flex:1;overflow:hidden;height:100%}
.is-rolled .window,.is-unrolling .window{flex:none}
/* the paper, its brocade edges and gold rules belong to the strip, so all of it moves together */
.strip{position:absolute;top:0;right:0;height:100%;min-width:100%;display:flex;flex-direction:row-reverse;align-items:center;gap:0;padding:0 70px;will-change:transform;
  background:#F6EEDC;background-image:var(--fibers),var(--grain);
  border-top:30px solid #3B2A4A;border-bottom:30px solid #3B2A4A;
  border-image:repeating-linear-gradient(90deg,#3B2A4A 0 18px,#4F3A60 18px 20px,#3B2A4A 20px 38px,#C9A24B 38px 40px) 30}
.strip::before,.strip::after{content:'';position:absolute;left:0;right:0;height:2px;background:var(--gold);z-index:2;pointer-events:none}
.strip::before{top:6px}.strip::after{bottom:6px}
.roll{position:relative;flex:none;width:var(--rw,46px);border-radius:12px;z-index:3;
  background:linear-gradient(90deg,#BFA675,#F6EEDC 38%,#E3D3AE 60%,#9C8456);background-size:100% 100%}
.scroll.is-open .roll{transition:width .2s,height .2s}
/* the layers of rolled paper: they slide with the paper's surface, so the roller turns with it */
.roll i{position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(90deg,transparent 0 7px,rgba(120,96,60,.22) 7px 8px,transparent 8px 13px,rgba(255,255,255,.35) 13px 14px);background-position:var(--turn,0) 0;
  -webkit-mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.roll::before,.roll::after{content:'';position:absolute;left:calc(50% - 15px);width:30px;height:24px;border-radius:5px;background:radial-gradient(circle at 40% 35%,#9C6A3A,#4A2E18 70%)}
.roll::before{top:-18px}.roll::after{bottom:-18px}

/* the title, at the start of the scroll */
.gedai{flex:none;height:100%;display:flex;flex-direction:row-reverse;align-items:flex-start;gap:24px;padding:44px 10px 0 40px}
.gedai__k{margin:0;writing-mode:vertical-rl;font-family:var(--brush);font-weight:400;font-size:calc(var(--ph) * .2);letter-spacing:.1em;line-height:1;color:var(--ink);padding:18px 14px;background:#FBF6EA;box-shadow:inset 0 0 0 3px var(--gold),0 2px 6px rgba(0,0,0,.15)}
.gedai__sub{margin:0;writing-mode:vertical-rl;font-family:var(--jp);font-size:20px;letter-spacing:.2em;padding-top:30px}
html:not([lang=ja]) .gedai__sub{font-family:var(--display);font-style:italic;letter-spacing:.04em;font-size:24px}
.gedai__by{margin:0;writing-mode:vertical-rl;font-size:15px;letter-spacing:.2em;color:rgba(42,34,24,.65);padding-top:auto;align-self:flex-end;margin-bottom:60px}

/* the words (kotobagaki) */
.kotoba{flex:none;height:100%;display:flex;align-items:center;padding:0 46px}
.kotoba__ja{height:calc(var(--ph) * .78);writing-mode:vertical-rl;font-family:var(--jp);font-size:clamp(16px,calc(var(--ph) * .032),21px);line-height:2.05;letter-spacing:.08em}
.kotoba__ja h2{font-family:var(--jp);font-weight:700;font-size:1.5em;letter-spacing:.2em;margin:0 0 0 18px;color:var(--wood)}
.kotoba__ja p{margin:0}
.kotoba__date{color:var(--shu);font-size:.85em;letter-spacing:.2em;margin-left:8px!important}
.kotoba__tools{color:rgba(42,34,24,.55);font-size:.8em;margin-right:22px!important}
.kotoba__en{width:min(400px,70vw);font-size:clamp(16px,calc(var(--ph) * .03),20px);line-height:1.6}
.kotoba__en .kick{margin:0;font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:var(--shu)}
.kotoba__en h2{font-family:var(--display);font-weight:600;font-size:2.1em;line-height:1.05;margin:6px 0 14px;color:var(--wood)}
.kotoba__en p{margin:0 0 12px}
.kotoba__en .kotoba__tools{font-style:italic;font-size:.85em;margin-top:6px}
.kotoba--preface .kotoba__ja h2{color:var(--shu)}

/* the pictures (e) */
.e{flex:none;height:100%;display:flex;flex-direction:row-reverse;align-items:center;gap:34px;padding:0 30px}
.e__frame{position:relative;margin:0;height:calc(var(--ph) * .6);aspect-ratio:var(--ar);background:#fff;padding:10px;box-shadow:0 0 0 1px rgba(0,0,0,.12),0 0 0 9px #EFE3C6,0 0 0 10px rgba(122,85,50,.45),0 14px 24px -10px rgba(0,0,0,.35)}
.e--two .e__frame{height:calc(var(--ph) * .5)}
.e--two .e__frame:nth-child(2){transform:translateY(12%) rotate(-1.2deg)}
.e__lens{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:zoom-in}
.e__lens img{display:block;width:100%;height:100%;object-fit:cover}
.e__frame--empty{background:repeating-linear-gradient(-45deg,#F6EEDC 0 12px,#EFE3C6 12px 24px)}
.e__wait{position:absolute;inset:10px;display:grid;place-content:center;gap:12px;text-align:center;padding:20px;border:2px dashed rgba(122,85,50,.4)}
.e__wait p{margin:0;font-family:var(--jp);font-size:16px;letter-spacing:.1em;color:rgba(42,34,24,.7)}
html:not([lang=ja]) .e__wait p{font-family:var(--display);font-style:italic;font-size:19px;letter-spacing:0}
.e__wait code{font-size:12px;color:rgba(42,34,24,.55)}
/* notes written on the picture */
.pin{position:absolute;left:var(--x);top:var(--y);width:0;height:0;font-style:normal;z-index:2}
.pin b{position:absolute;left:-13px;top:-13px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--shu);color:#FBF2E4;font-family:var(--jp);font-size:14px;box-shadow:0 0 0 3px rgba(251,242,228,.9),0 2px 4px rgba(0,0,0,.3)}
.pin span{position:absolute;top:-12px;white-space:nowrap;padding:3px 9px;font-family:var(--jp);font-size:14px;background:rgba(251,246,234,.95);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.2)}
html:not([lang=ja]) .pin span{font-family:var(--en);font-style:italic;font-size:15px}
.pin--r span{left:20px}.pin--l span{right:20px}

/* gold mist between the scenes, and the ring of each version */
.kasumi{position:relative;flex:none;width:200px;height:100%;margin:0 -40px;pointer-events:none;z-index:1}
.kasumi__gold{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.kasumi__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;background:rgba(251,246,234,.92);border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.kasumi__mark svg{width:70px;height:70px}
.kasumi__date{margin:0;font-family:var(--jp);font-size:14px;letter-spacing:.14em;color:var(--wood);white-space:nowrap}
html[lang=ja] .kasumi__date{writing-mode:vertical-rl;max-height:200px}

/* the end */
.okugaki{flex:none;height:100%;display:flex;flex-direction:row-reverse;align-items:center;gap:40px;padding:0 60px 0 80px}
.okugaki__tree{width:calc(var(--ph) * .42);height:calc(var(--ph) * .42);border-radius:50%;background:radial-gradient(circle,#E9CFA0,#C9A26B 70%);box-shadow:0 10px 20px -8px rgba(0,0,0,.4)}
.okugaki__txt{width:min(380px,70vw)}
.okugaki__k{margin:0 0 18px;font-family:var(--jp);font-size:20px;line-height:1.8}
html:not([lang=ja]) .okugaki__k{font-family:var(--display);font-style:italic;font-size:26px;line-height:1.3}
.okugaki__k p{margin:0}
.okugaki__links{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:0 0 18px}
.okugaki__small{margin:0;font-size:13px;color:rgba(42,34,24,.6)}
.ink-btn{min-height:44px;padding:0 18px;display:inline-flex;align-items:center;cursor:pointer;background:transparent;color:var(--wood);border:1.5px solid var(--wood);border-radius:2px;font:inherit;font-family:var(--jp);font-size:15px;letter-spacing:.08em;text-decoration:none}
.ink-btn--solid{background:var(--wood);color:#F6EEDC}
.ink-btn:hover{background:var(--shu);border-color:var(--shu);color:#F6EEDC}

/* the rings along the bottom: one for each version */
.rings{position:fixed;z-index:20;left:0;right:0;bottom:30px;display:flex;justify-content:center;opacity:0;transition:opacity .6s}
.is-open .rings{opacity:1}
.rings ol{display:flex;flex-direction:row-reverse;gap:6px;margin:0;padding:0;list-style:none}
.rings button{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px;min-height:44px;padding:4px;border:0;background:none;cursor:pointer;color:#2E2418;font:inherit;font-size:12px}
.rings button i{width:16px;height:16px;border-radius:50%;border:2px solid var(--wood);background:transparent;transition:background .3s,transform .3s}
.rings button[aria-current] i{background:var(--wood);transform:scale(1.25)}
.rings button span{font-family:var(--jp);letter-spacing:.06em;opacity:.75}
.hint{position:fixed;z-index:20;left:0;right:0;bottom:6px;margin:0;text-align:center;font-size:13px;letter-spacing:.08em;color:rgba(46,36,24,.7);pointer-events:none;transition:opacity .6s}
html[lang=ja] .hint{font-family:var(--jp)}
.has-moved .hint{opacity:0}

/* tall screens: the scroll hangs and unrolls downward */
.port{--ph:min(560px,calc(100vw - 40px))}
.port .desk{inset:58px 0 64px;align-items:stretch;justify-items:center}
.port .scroll{flex-direction:column;justify-content:flex-start;width:var(--ph);height:100%;padding:10px 0}
.port .window{width:100%;height:auto}
.port .strip{top:0;left:0;right:0;bottom:auto;width:100%;height:auto;min-width:0;min-height:100%;flex-direction:column;padding:40px 0;border:0;border-left:22px solid #3B2A4A;border-right:22px solid #3B2A4A;
  border-image:repeating-linear-gradient(180deg,#3B2A4A 0 18px,#4F3A60 18px 20px,#3B2A4A 20px 38px,#C9A24B 38px 40px) 22}
.port .strip::before,.port .strip::after{display:none}
.port .daisen{left:16%;top:50%;transform:translateY(-50%);width:auto;height:32px;padding:0 14px;writing-mode:horizontal-tb;line-height:32px;font-size:22px}
.port .himo{left:60%;right:auto;top:-4px;bottom:-4px;width:10px;height:auto}
.port .hyoshi{background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%,rgba(0,0,0,.4)),repeating-linear-gradient(90deg,#3B2A4A 0 14px,#4F3A60 14px 16px,#3B2A4A 16px 30px,#C9A24B 30px 32px)}
.port .roll{width:auto;height:var(--rw,40px);background:linear-gradient(180deg,#BFA675,#F6EEDC 38%,#E3D3AE 60%,#9C8456)}
.port .roll i{background:repeating-linear-gradient(180deg,transparent 0 7px,rgba(120,96,60,.22) 7px 8px,transparent 8px 13px,rgba(255,255,255,.35) 13px 14px);background-position:0 var(--turn,0);
  -webkit-mask:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent);mask:linear-gradient(180deg,transparent,#000 25%,#000 75%,transparent)}
.port .roll::before,.port .roll::after{left:auto;top:calc(50% - 12px);width:20px;height:24px}
.port .roll::before{left:-14px}.port .roll::after{right:-14px;bottom:auto}
.port .gedai,.port .kotoba,.port .e,.port .okugaki{height:auto;width:100%}
.port .gedai{justify-content:center;padding:20px 20px 30px}
.port .gedai__k{font-size:96px}
.port .kotoba{padding:30px 22px;justify-content:center}
.port .kotoba__ja{height:560px;font-size:17px}
.port .kotoba__en{width:100%}
.port .e{flex-direction:column;gap:30px;padding:20px 22px}
.port .e__frame{height:auto;width:100%}
.port .e--two .e__frame:nth-child(2){transform:rotate(-1deg)}
.port .kasumi{width:100%;height:150px;margin:0}
.port .kasumi__gold{display:none}
.port .kasumi{background:radial-gradient(ellipse 40% 22% at 30% 35%,rgba(226,196,127,.9),transparent 70%),radial-gradient(ellipse 45% 20% at 72% 62%,rgba(217,184,103,.85),transparent 70%)}
.port .okugaki{flex-direction:column;padding:30px 22px 50px}
.port .okugaki__tree{width:200px;height:200px}
.port .pin span{white-space:normal;width:150px}

/* the figure viewer */
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent}
.lb::backdrop{background:rgba(30,20,12,.92)}
.lb[open]{display:grid;place-items:center}
.lb img{max-width:92vw;max-height:86vh;box-shadow:0 0 0 8px #F6EEDC,0 30px 60px -20px rgba(0,0,0,.9)}
.lb__close{position:fixed;top:12px;right:16px;width:48px;height:48px;border:0;background:none;color:#F6EEDC;font-size:34px;cursor:pointer}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
.port .rings{bottom:14px}
.port .rings button span{display:none}
.port .hint{display:none}
.port .desk{inset:58px 0 64px}
.port .rolled{bottom:auto;top:calc(50% + 70px)}
.port .is-open ~ .rolled{display:none}