/* Layout: one full homepage stage (mist palette, frosted, still) with a switch for how the cut-out slips meet the background; option notes underneath */
:root{
  --bg:#e9e6e1;--paper:#f6f4f0;--ink:#24231f;--muted:#6c6860;--line:#cfcac1;
  --celadon:#5f8a7b;--celadon-soft:#dbe6e0;--shadow:rgba(40,35,25,.14);
  --f-serif:"Noto Serif SC","Songti SC","STSong",serif;
  --f-sans:"Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#1c1b19;--paper:#262522;--ink:#ece8e1;--muted:#a39e94;--line:#3d3a35;
  --celadon:#8fbcaa;--celadon-soft:#2b3833;--shadow:rgba(0,0,0,.45);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#1c1b19;--paper:#262522;--ink:#ece8e1;--muted:#a39e94;--line:#3d3a35;
  --celadon:#8fbcaa;--celadon-soft:#2b3833;--shadow:rgba(0,0,0,.45);color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-sans);font-size:15px;line-height:1.75;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:40px 80px}
.wrap{max-width:1120px;margin:0 auto;display:grid;gap:30px}
h1,h2,h3{font-family:var(--f-serif);text-wrap:balance;margin:0;line-height:1.3}
h1{font-size:clamp(30px,5vw,44px);font-weight:900;letter-spacing:.02em}
h3{font-size:17px;font-weight:600}
p{margin:0}
button:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--celadon);outline-offset:2px}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lede{max-width:46em;color:var(--muted);font-size:16px}
header{display:grid;gap:14px}
.note{font-size:14px;color:var(--muted);max-width:52em}

/* stage: fixed light world standing for the homepage */
.stage{position:relative;overflow:hidden;color:#2a2926;background:#e3dfe7;user-select:none;-webkit-user-select:none;width:100%;height:clamp(540px,64vw,660px);border-radius:6px;box-shadow:0 1px 0 var(--line),0 24px 50px -24px var(--shadow)}
.bgs{position:absolute;inset:0}
.bgs canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.4s ease}
.bgs canvas.on{opacity:1}
.s-nav{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:20px 26px;z-index:5;font-size:13px;letter-spacing:.12em;pointer-events:none}
.s-nav nav{display:flex;gap:20px;align-items:baseline}
.s-nav .dot{width:6px;height:6px;border-radius:50%;background:#2a2926;display:inline-block;align-self:center;opacity:.6}
@media (max-width:520px){.s-nav{padding:16px}.s-nav nav{gap:10px;font-size:12px}}
.pos{position:absolute;transition:opacity .45s ease}
.pos.r{transform:translateX(-100%)}
.pos.gone{opacity:0;pointer-events:none}
.slip{display:block;white-space:nowrap;cursor:pointer;font-family:var(--f-serif);color:#22211e;line-height:1.35;padding:3px 9px 4px;letter-spacing:.05em;
  transform:rotate(var(--rot,0deg));transition:transform .2s ease,background-color 1.2s ease;font-size:var(--fs,17px)}
.slip.sub{color:#58545e;font-weight:300}
.slip.big{font-weight:600;letter-spacing:.02em}
.pos.on .slip,.pos:hover .slip{transform:rotate(0deg)}

/* slip treatments */
.t-cream .pos{filter:drop-shadow(0 1px 1px rgba(0,0,0,.16)) drop-shadow(0 3px 4px rgba(0,0,0,.07))}
.t-cream .slip{background:var(--pp)}
.t-tint .pos{filter:drop-shadow(0 1px 1px rgba(70,60,90,.14)) drop-shadow(0 3px 5px rgba(70,60,90,.06))}
.t-tint .slip{background:var(--tint)}
.t-grain .pos{filter:drop-shadow(0 1px 1px rgba(70,60,90,.14)) drop-shadow(0 3px 5px rgba(70,60,90,.06))}
.t-grain .slip{background:var(--grainimg),var(--tint);background-blend-mode:multiply}
.t-vellum .slip{background:rgba(250,248,252,.5);-webkit-backdrop-filter:blur(8px) saturate(1.05);backdrop-filter:blur(8px) saturate(1.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.t-soak .slip{background:var(--tint);mix-blend-mode:multiply}
.t-soak .slip.sub{color:#4e4a55}

/* instant film prints: real paper */
.print{position:absolute;z-index:7;pointer-events:none;opacity:0;transform:translateY(10px) rotate(var(--prot,0deg));transition:opacity .3s ease,transform .45s cubic-bezier(.2,.7,.2,1)}
.print.show{opacity:1;transform:rotate(var(--prot,0deg))}
.pola{position:relative;display:block;border-radius:2px;
  padding:var(--pt) var(--ps) var(--pb);
  background:
    linear-gradient(var(--curl,100deg),rgba(255,255,255,.55),rgba(255,255,255,0) 35%,rgba(0,0,0,0) 70%,rgba(60,50,80,.07)),
    var(--finegrain),
    #f9f8f6;
  background-blend-mode:normal,multiply,normal;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(0,0,0,.05),
    0 1px 1px rgba(40,30,60,.18),
    0 3px 6px rgba(40,30,60,.08),
    0 18px 30px -12px rgba(40,30,60,.28)}
.pola .win{position:relative;display:block;overflow:hidden;border-radius:1px}
.pola .win .ph{position:absolute;inset:0;filter:saturate(.82) contrast(.96)}
.pola .win::before{content:"";position:absolute;inset:0;z-index:1;background:var(--grainimg);mix-blend-mode:multiply;opacity:.55}
.pola .win::after{content:"";position:absolute;inset:0;z-index:2;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.35),inset 0 0 18px rgba(0,0,0,.12);
  background:linear-gradient(160deg,rgba(255,250,240,.10),rgba(0,0,0,0) 40%,rgba(30,20,50,.06))}
.pola .cap{position:absolute;left:var(--ps);right:var(--ps);bottom:0;height:var(--pb);display:flex;align-items:center;justify-content:center;
  font-family:var(--f-serif);font-size:10px;letter-spacing:.14em;color:#8d8994;font-weight:300}
/* desk calendar */
.cal{position:absolute;left:26px;top:62px;z-index:6;cursor:pointer;user-select:none}
.cal:focus-visible{outline:1px dashed #2a2926;outline-offset:6px}
.c-pad .pad{width:84px;background:var(--grainimg),var(--calp);background-blend-mode:multiply;position:relative;opacity:.92;
  box-shadow:0 1px 0 -.5px rgba(255,255,255,.6),0 2px 0 -1px #e3dfe8,0 3px 0 -1.5px #dad5e0,0 6px 10px -6px rgba(50,40,70,.22)}
.c-pad .bind{height:6px;background:rgba(60,52,72,.16);position:relative}
.c-pad .bind i{display:none}
.c-pad .body{padding:6px 6px 7px;display:grid;justify-items:center;gap:1px;font-family:var(--f-serif);color:#4a4652}
.c-pad .mo{font-size:9px;letter-spacing:.18em;color:#8a8590}
.c-pad .day{font-size:28px;line-height:1.05;font-weight:400;letter-spacing:0}
.c-pad .wk{font-size:9px;letter-spacing:.26em;color:#8a8590}
.c-pad .perf{width:100%;border-top:1px dashed rgba(60,50,80,.18);margin:5px 0 4px}
.c-pad .wx{display:flex;align-items:center;gap:4px;font-size:9px;color:#8a8590;letter-spacing:.04em}
.c-pad .wx .wxi{transform:scale(.75);transform-origin:left center;width:12px}
.c-pad .stamp{position:absolute;left:94px;top:10px;transform:rotate(-8deg)}
.c-pad .status{margin-top:10px;transform:none;filter:none}
.c-pad .status .pp{background:none;clip-path:none;padding:0;font-size:11px;color:#7d7884;letter-spacing:.04em;max-width:180px}
.stamp{width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(150,70,80,.75);color:rgba(150,70,80,.85);display:grid;place-items:center;
  font-family:var(--f-serif);font-size:15px;font-weight:600;background:rgba(255,255,255,.15);mix-blend-mode:multiply}
.c-pad .stamp{width:22px;height:22px;font-size:10px;border-width:1px;border-color:rgba(150,70,80,.5);color:rgba(150,70,80,.6);font-weight:400;background:none}
.status{display:inline-block;filter:drop-shadow(0 1px 1px rgba(50,40,70,.16))}
.status .pp{display:block;font-family:var(--f-serif);font-size:12px;color:#3a3640;padding:3px 9px 4px;background:var(--calp);clip-path:var(--sc);white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
/* scattered bits */
.c-bits{width:220px;height:150px}
.c-bits .b{position:absolute;filter:drop-shadow(0 1px 1px rgba(50,40,70,.16)) drop-shadow(0 2px 3px rgba(50,40,70,.07))}
.c-bits .b .pp{display:block;background:var(--calp);clip-path:var(--sc);font-family:var(--f-serif);color:#2c2932;padding:2px 8px 3px}
.c-bits .bd{left:0;top:6px;transform:rotate(-3deg)}.c-bits .bd .pp{font-size:40px;font-weight:600;line-height:1.1;padding:0 10px}
.c-bits .bm{left:74px;top:0;transform:rotate(4deg)}.c-bits .bm .pp{font-size:11px;letter-spacing:.2em}
.c-bits .bw{left:78px;top:30px;transform:rotate(-2deg)}.c-bits .bw .pp{font-size:11px;letter-spacing:.24em;background:#2f2c33;color:#eeebf1}
.c-bits .bx{left:6px;top:66px;transform:rotate(2deg)}.c-bits .bx .pp{font-size:11px;display:flex;gap:6px;align-items:center}
.c-bits .stamp{position:absolute;left:150px;top:22px;transform:rotate(10deg)}
.c-bits .status{position:absolute;left:12px;top:100px;transform:rotate(-1deg)}
.wxi{display:inline-block;width:16px;height:12px;position:relative}
.wxi::before{content:"";position:absolute;left:0;top:1px;width:9px;height:9px;border-radius:50%;background:#d8b98a}
.wxi::after{content:"";position:absolute;left:4px;top:4px;width:12px;height:7px;border-radius:4px;background:#b9b5c4;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.wxi.rain::before{display:none}
/* editor */
.editor{position:absolute;left:26px;z-index:9;width:250px;padding:14px;background:rgba(250,249,252,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 14px 30px -12px rgba(40,30,60,.35),inset 0 0 0 1px rgba(255,255,255,.7);display:grid;gap:10px;font-size:12px;color:#3a3640;cursor:default}
.editor[hidden]{display:none}
.editor .moods{display:flex;gap:6px;flex-wrap:wrap}
.editor .moods button{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(150,70,80,.45);background:transparent;color:rgba(150,70,80,.85);font-family:var(--f-serif);font-size:13px;cursor:pointer}
.editor .moods button[aria-pressed="true"]{background:rgba(150,70,80,.12);border-color:rgba(150,70,80,.85)}
.editor input{font:13px var(--f-serif);padding:6px 8px;border:1px solid rgba(60,50,80,.2);background:rgba(255,255,255,.7);color:#2c2932;width:100%}
.editor .row2{display:flex;justify-content:space-between;align-items:center}
.editor .ok{font:inherit;font-size:12px;padding:4px 14px;border:0;background:#3d3946;color:#f1eef4;cursor:pointer}
.editor small{color:#7a7582}
.mpad{display:block;width:80px;cursor:pointer;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),var(--mp,#f4f2f6);transform:rotate(-1deg);transition:transform .3s ease;position:relative;
  box-shadow:0 1.5px 0 -.5px var(--mp2,#e4e0ea),0 3px 0 -1px var(--mp3,#dad5e1),0 1px 2px rgba(50,40,70,.10),0 4px 8px -4px rgba(50,40,70,.16)}
.mpad:hover,.mpad:focus-visible{transform:rotate(0deg) translateY(-2px);outline:none}
.mpad .mb{display:block;height:8px;background:var(--mbind,#9a8fac);position:relative}
.mpad .mb::before,.mpad .mb::after{content:"";position:absolute;top:-5px;width:6px;height:10px;border-radius:3px;border:1.2px solid #b4b0ba;border-bottom-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.mpad .mb::before{left:20px}.mpad .mb::after{right:20px}
.mpad .mbody{display:grid;justify-items:center;padding:6px 4px 7px;font-family:var(--f-serif);color:#2c2932}
.mpad .ma{font-size:10px;letter-spacing:.14em;color:#6d6874}
.mpad .my{font-size:24px;line-height:1.1;font-weight:600;color:#36323e}
.mpad .mperf{width:100%;border-top:1px dashed rgba(60,50,80,.2);margin:5px 0 4px}
.mpad .mgo{font-size:10px;letter-spacing:.2em;color:#4d4955}

/* page-flip on hover */
.mpad{perspective:360px}
.mpad .mbody{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),var(--mp);transform-origin:50% 0;
  transition:transform .5s cubic-bezier(.25,.8,.3,1),box-shadow .5s ease;backface-visibility:hidden;will-change:transform}
.mpad .mbody::after{content:"";position:absolute;right:0;bottom:0;width:0;height:0;transition:width .45s cubic-bezier(.25,.8,.3,1),height .45s cubic-bezier(.25,.8,.3,1);
  background:linear-gradient(315deg,transparent 50%,rgba(255,255,255,.95) 50%,var(--mp2) 78%,rgba(60,50,80,.18));box-shadow:-2px -2px 3px rgba(50,40,70,.12)}
.mpad:hover .mbody,.mpad:focus-visible .mbody{transform:rotateX(-16deg);box-shadow:0 8px 10px -6px rgba(50,40,70,.25)}
.mpad:hover .mbody::after,.mpad:focus-visible .mbody::after{width:16px;height:16px}
.mpad.flip .mbody{transform:rotateX(-115deg);opacity:.0;transition:transform .42s cubic-bezier(.5,0,.7,.4),opacity .42s ease .1s}

/* entry variants */
.mpad.mv-stack .mb,.mpad.mv-tear .mb,.mpad.mv-clip .mb,.mpad.mv-ticket .mb{display:none}
.mpad.mv-stack{isolation:isolate;background:none;box-shadow:none}
.mpad.mv-stack .mbody{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),var(--mp);box-shadow:0 1px 2px rgba(50,40,70,.10),0 4px 8px -4px rgba(50,40,70,.16)}
.mpad.mv-stack::before,.mpad.mv-stack::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--mp2);box-shadow:0 1px 2px rgba(50,40,70,.08)}
.mpad.mv-stack::before{transform:rotate(4deg) translate(3px,2px)}
.mpad.mv-stack::after{background:var(--mp3);transform:rotate(-3.5deg) translate(-3px,3px)}
.mpad.mv-stack .mbody{padding-top:9px}
.mpad.mv-tear{transform:rotate(2.5deg);box-shadow:none;filter:drop-shadow(0 1px 1px rgba(50,40,70,.12)) drop-shadow(0 3px 4px rgba(50,40,70,.08));
  clip-path:polygon(0 4px,6% 0,12% 3px,19% 1px,25% 4px,32% 0,39% 3px,46% 1px,53% 4px,60% 0,67% 3px,74% 1px,81% 4px,88% 0,94% 3px,100% 1px,100% 100%,0 100%)}
.mpad.mv-tear:hover,.mpad.mv-tear:focus-visible{transform:rotate(0deg) translateY(-2px)}
.mpad.mv-tear .mbody{padding-top:11px}
.mpad.mv-clip{margin-top:6px}
.mpad.mv-clip::before{content:"";position:absolute;left:50%;top:-7px;width:26px;height:12px;transform:translateX(-50%);border-radius:2px 2px 3px 3px;
  background:linear-gradient(180deg,var(--mbind),color-mix(in srgb,var(--mbind) 75%,#000));box-shadow:0 1px 1px rgba(40,30,50,.25)}
.mpad.mv-clip::after{content:"";position:absolute;left:50%;top:-15px;width:16px;height:10px;transform:translateX(-50%);border:1.2px solid #b4b0ba;border-bottom:0;border-radius:6px 6px 0 0}
.mpad.mv-clip .mbody{padding-top:10px}
.mpad.mv-ticket{width:96px;box-shadow:0 1px 2px rgba(50,40,70,.10),0 4px 8px -4px rgba(50,40,70,.16);
  -webkit-mask:radial-gradient(circle 5px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 5px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 5px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.mpad.mv-ticket .mbody{padding:8px 10px}
.mpad.mv-ticket .mperf{border-top:1px dashed rgba(60,50,80,.3)}
.mpad.mv-ticket .my{letter-spacing:.06em}

.album{position:absolute;inset:0;z-index:12;background:rgba(242,240,246,.8);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .35s ease}
.album.open{opacity:1;pointer-events:auto}
.album .in{max-width:1040px;margin:0 auto;padding:64px 28px 48px;display:grid;gap:22px}
.album .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.album .yr{font-family:var(--f-serif);font-size:44px;font-weight:600;line-height:1;color:#2c2932}
.album .yr small{font-size:13px;font-weight:400;letter-spacing:.14em;color:#6d6874;margin-left:10px}
.album .tabs{display:flex;gap:6px;flex-wrap:wrap}
.album .tabs button,.album .close{font-family:var(--f-serif);font-size:12px;letter-spacing:.1em;padding:3px 10px 4px;border:0;cursor:pointer;color:#3a3640;background:var(--calp,#efedf2);clip-path:polygon(2% 6%,98% 0,100% 94%,0 100%);filter:none}
.album .tabs button[aria-pressed="true"]{background:var(--soft,#cdc3d8);color:#3a3442}
.album .close{position:absolute;top:18px;left:26px;background:#2f2c33;color:#eeebf1;position:sticky;justify-self:start}
.album .close{background:var(--soft,#cdc3d8);color:#3a3442}
.album h4{font-family:var(--f-serif);font-size:13px;letter-spacing:.3em;color:#6d6874;margin:6px 0 0;font-weight:400}
.album .grid{display:flex;gap:24px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;padding:4px 2px 30px;margin:0 -2px;cursor:grab;
  scrollbar-width:thin;scrollbar-color:rgba(60,50,80,.25) transparent;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.album .grid.drag{cursor:grabbing;scroll-snap-type:none}
.album .grid::-webkit-scrollbar{height:3px}.album .grid::-webkit-scrollbar-thumb{background:rgba(60,50,80,.25);border-radius:2px}
.album .grid{gap:28px}
.album .grid .card{flex:none;margin:0;scroll-snap-align:start}
.album .grid .card img{display:block;height:min(400px,calc(var(--gh,600px) * .6));width:auto;background:#ecebe8;box-shadow:0 1px 2px rgba(50,40,70,.08)}
.album .grid .card figcaption{display:flex;gap:12px;margin-top:10px;font-family:var(--f-serif);font-size:11px;letter-spacing:.12em;color:#8a8590}
.album .grid .card figcaption b{font-weight:400;color:#4a4652}
@media (max-width:640px){.album .grid .card img{height:min(300px,calc(var(--gh,600px) * .48))}}
.album .grid .card img,.album .grid .card .ph{-webkit-user-drag:none;user-select:none}
.album .card{position:relative}
.album .card .pola{--ps:6px;--pt:7px;--pb:26px}
.album .card .t{position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);white-space:nowrap;filter:drop-shadow(0 1px 1px rgba(50,40,70,.16))}
.album .card .t span{display:block;font-family:var(--f-serif);font-size:12px;color:#2c2932;padding:2px 8px 3px;background:var(--calp,#efedf2);clip-path:var(--sc)}
.album .list{display:grid;gap:8px}
.album .row{display:flex;align-items:baseline;gap:10px;font-family:var(--f-serif);font-size:14px;color:#2c2932}
.album .row .t2{padding:2px 9px 3px;background:var(--calp,#efedf2);clip-path:var(--sc);filter:none}
.album .row .lead{flex:1;border-bottom:1px dotted rgba(60,50,80,.3);transform:translateY(-4px)}
.album .row small{font-family:var(--f-mono);font-size:11px;color:#6d6874}
.print.under{z-index:3}
.pos{z-index:4}
.pos.lift{z-index:8}

.ruler{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;width:min(420px,80%);height:58px;touch-action:none;cursor:pointer}
.ruler:focus-visible{outline:1px dashed #2a2926;outline-offset:6px}
.ruler .sh{position:absolute;filter:drop-shadow(0 1px 1px rgba(50,40,70,.16)) drop-shadow(0 2px 3px rgba(50,40,70,.07));transition:left .35s ease,transform .35s ease,opacity .35s ease}
.ruler .pp{display:block;background:var(--rp);clip-path:var(--rc);transition:background-color 1.2s}
/* tape measure strip: quiet, hairline */
.r-tape .strip{left:-10px;right:-10px;top:16px;transform:rotate(-.6deg);filter:drop-shadow(0 1px 1px rgba(50,40,70,.10))}
.r-tape .strip .pp{height:15px;background-color:var(--rp);opacity:.82;
  background-image:repeating-linear-gradient(90deg,rgba(44,41,50,.28) 0 1px,transparent 1px calc((100% - 20px)/36));background-size:100% 5px;background-position:10px 0;background-repeat:no-repeat}
.r-tape .yl{top:14px;width:1px;height:10px;background:rgba(44,41,50,.55);filter:none;transform:rotate(-.6deg)}
.r-tape .yl span{position:absolute;top:22px;left:50%;transform:translateX(-50%);font-family:var(--f-serif);font-size:10px;letter-spacing:.24em;color:#8a8590;white-space:nowrap;transition:color .3s}
.r-tape .yl.cur span{color:#2c2932;font-weight:600}
.r-tape .ptr{top:8px;width:1px;height:28px;margin-left:0;background:#2c2932;filter:none;transform:rotate(-.6deg)}
.r-tape .ptr::after{content:"";position:absolute;top:-3px;left:-2px;width:5px;height:5px;border-radius:50%;background:#2c2932}
/* torn calendar pages */
.r-cal .sheet{top:2px;transform:translateX(-50%) rotate(var(--rr)) scale(.88);opacity:.78}
.r-cal .sheet .pp{width:50px;height:52px;display:grid;grid-template-rows:12px 1fr;justify-items:center;font-family:var(--f-serif);color:#2f2c33}
.r-cal .sheet .bind{width:100%;background:rgba(60,50,80,.16);display:flex;justify-content:space-around;align-items:center}
.r-cal .sheet .bind i{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75)}
.r-cal .sheet b{font-size:15px;font-weight:600;align-self:center;letter-spacing:.02em}
.r-cal .sheet small{font-size:8px;letter-spacing:.2em;margin-top:-10px;opacity:.6}
.r-cal .sheet.cur{transform:translateX(-50%) rotate(0deg) scale(1.06);opacity:1;z-index:2}
/* ransom-cut digits */
.r-words .yw{top:14px;transform:translateX(-50%);display:flex;gap:1px;opacity:.5;filter:none}
.r-words .yw .d{filter:drop-shadow(0 1px 1px rgba(50,40,70,.18))}
.r-words .yw .d .pp{padding:0 3px;font-size:14px;line-height:1.3;color:#2a2830;transform:rotate(var(--rr))}
.r-words .yw.cur{opacity:1}
.r-words .yw .tp{position:absolute;left:-8px;right:-8px;top:6px;height:12px;background:rgba(252,251,253,.62);transform:rotate(-7deg);opacity:0;transition:opacity .3s;clip-path:polygon(0 10%,100% 0,98% 100%,2% 88%)}
.r-words .yw.cur .tp{opacity:1}

.controls{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:flex-end;justify-content:center}
.ctl{display:grid;gap:4px}
.ctl>span{font-size:12px;color:var(--muted);font-family:var(--f-mono);letter-spacing:.06em}
.seg{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper)}
.seg button{font:inherit;font-size:13px;padding:6px 14px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--celadon);color:var(--paper)}

.opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.opts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.opts{grid-template-columns:minmax(0,1fr)}}
.opt{border-top:1px solid var(--line);padding-top:8px;font-size:14px;display:grid;gap:3px;align-content:start}
.opt.cur{border-top:2px solid var(--celadon)}
.opt b{font-family:var(--f-serif);font-size:15px}
.opt .k{font-family:var(--f-mono);font-size:11px;color:var(--celadon);letter-spacing:.06em}

.answer{background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:20px 22px;display:grid;gap:12px}
textarea{width:100%;min-height:130px;font:13px/1.6 var(--f-mono);padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink);resize:vertical}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{font:inherit;font-size:14px;padding:7px 18px;border-radius:999px;border:0;background:var(--celadon);color:var(--paper);cursor:pointer}
.btn.ghostb{background:transparent;color:var(--celadon);border:1px solid var(--celadon)}
.small{font-size:13px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.pos,.slip,.print,.bgs canvas,.ruler .sh{transition:none}}
.s-nav .go{pointer-events:auto;cursor:pointer;border-bottom:1px solid transparent;transition:border-color .2s}
.s-nav .go:hover,.s-nav .go:focus-visible{border-bottom-color:#2a2926;outline:none}
.gopt{border-top:1px solid var(--line);padding-top:8px;font-size:14px;display:grid;gap:3px;align-content:start}
.gopt.cur{border-top:2px solid var(--celadon)}
.gopt b{font-family:var(--f-serif);font-size:15px}
.gopt .k{font-family:var(--f-mono);font-size:11px;color:var(--celadon);letter-spacing:.06em}
#gopts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:700px){#gopts{grid-template-columns:minmax(0,1fr)}}
/* month highlight */
.pos.dim{opacity:.38}
.pos.gone.dim{opacity:0}
.pos.dim:hover,.pos.dim:focus-within{opacity:1}
/* month dial */
.ruler.r-tape{width:min(540px,86%);height:66px;cursor:grab;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent)}
.ruler.r-tape.drag{cursor:grabbing}
.r-tape .band{position:absolute;left:0;right:0;top:24px;height:15px;background:var(--rp,#efedf2);opacity:.75}
.r-tape .tape{position:absolute;left:0;top:24px;height:40px;will-change:transform}
.r-tape .tk{position:absolute;top:0;width:1px;height:4px;background:rgba(44,41,50,.22)}
.r-tape .tk.q{height:8px;background:rgba(44,41,50,.42)}
.r-tape .tk.y{height:11px;background:rgba(44,41,50,.55)}
.r-tape .tk.has::after{content:"";position:absolute;left:-1px;top:-5px;width:3px;height:3px;border-radius:50%;background:rgba(150,110,140,.7)}
.r-tape .ylab{position:absolute;left:0;top:0;font-family:var(--f-serif);font-size:10px;letter-spacing:.3em;color:#8a8590}
.r-tape .tk.y span{position:absolute;top:19px;left:0;transform:translateX(-50%);font-family:var(--f-serif);font-size:10px;letter-spacing:.24em;color:#8a8590;white-space:nowrap;transition:color .3s}
.r-tape .tk.y.cur span{color:#2c2932;font-weight:600}
.r-tape .needle{position:absolute;left:50%;top:18px;width:1px;height:26px;background:#2c2932;transform-origin:50% 0;z-index:2}
.r-tape .needle::after{content:"";position:absolute;top:-3px;left:-2px;width:5px;height:5px;border-radius:50%;background:#2c2932}
.r-tape .needle.kick{animation:kick .17s ease-out}
@keyframes kick{30%{transform:rotate(4deg)}65%{transform:rotate(-1.6deg)}100%{transform:rotate(0)}}
.r-tape .mlab{position:absolute;left:50%;top:0;transform:translateX(-50%);font-family:var(--f-serif);font-size:10px;line-height:12px;letter-spacing:.22em;color:#4a4652;white-space:nowrap;z-index:2}
/* gallery */
.gal{position:absolute;inset:0;z-index:14;background:#f7f6f4;overflow-y:auto;overflow-x:hidden;opacity:0;pointer-events:none;transition:opacity .4s ease;
  display:grid;grid-template-columns:150px minmax(0,1fr);align-items:start;color:#2c2932;--gh:600px}
.gal.open{opacity:1;pointer-events:auto}
.g-side{position:sticky;top:0;height:var(--gh);padding:22px 0 22px 26px;display:flex;flex-direction:column;gap:22px;font-family:var(--f-serif)}
.g-side .nm{font-family:var(--f-sans);font-size:13px;letter-spacing:.12em;cursor:pointer;align-self:flex-start;border-bottom:1px solid transparent;transition:border-color .2s}
.g-side .nm:hover,.g-side .nm:focus-visible{border-bottom-color:#2a2926;outline:none}
.g-side .ti{font-size:12px;letter-spacing:.3em;color:#8a8590}
.g-side .yrs{display:grid;gap:8px;justify-items:start}
.g-side .yrs button,.g-side .back{font-family:var(--f-serif);font-size:13px;letter-spacing:.14em;color:#8a8590;background:none;border:0;padding:0;cursor:pointer;transition:color .2s}
.g-side .yrs button.cur{color:#2c2932;font-weight:600}
.g-side .yrs button:hover,.g-side .back:hover{color:#2c2932}
.g-side .back{margin-top:auto;font-size:12px;align-self:flex-start;text-align:left}
.g-main{padding:24px 48px 80px 8px;min-width:0}
.g-main section{margin-bottom:12vh}
.g-main h2{font-family:var(--f-serif);font-weight:400;font-size:12px;letter-spacing:.32em;color:#8a8590;margin:0 0 26px}
.g-main figure{margin:0;opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.g-main figure.in{opacity:1;transform:none}
.g-main img{display:block;width:100%;height:auto;background:#ecebe8}
.g-main figcaption{font-family:var(--f-serif);font-size:11px;letter-spacing:.12em;color:#8a8590;margin-top:10px;display:flex;gap:12px;flex-wrap:wrap}
.g-main figcaption b{font-weight:400;color:#4a4652}
/* single column */
.g-col figure{margin:0 auto calc(var(--gh) * .22);width:fit-content;max-width:100%}
.g-col img{width:auto;max-width:100%;max-height:calc(var(--gh) - 120px)}
/* mix */
.g-mix .row{display:flex;gap:3vw;align-items:flex-end;margin-bottom:calc(var(--gh) * .16)}
.g-mix .row.full figure{width:100%}
.g-mix .row.full img{max-height:calc(var(--gh) - 90px);object-fit:cover}
.g-mix .row.pair figure{flex:1 1 0}
.g-mix .row.pair img{aspect-ratio:4/5;object-fit:cover}
.g-mix .row.left figure{width:62%}
.g-mix .row.right{justify-content:flex-end}.g-mix .row.right figure{width:46%}
/* horizontal roll */
.gal.g-roll{overflow:hidden}
.g-roll .g-main{display:flex;align-items:flex-start;gap:56px;overflow-x:auto;overflow-y:hidden;height:var(--gh);padding:56px 48px 40px 12px;scrollbar-width:thin;scrollbar-color:rgba(60,50,80,.2) transparent}
.g-roll section{display:flex;gap:40px;align-items:flex-start;flex:none;margin:0}
.g-roll h2{writing-mode:vertical-rl;margin:0;flex:none}
.g-roll figure{flex:none}
.g-roll img{height:calc(var(--gh) - 150px);width:auto}
@media (max-width:640px){
  .gal{grid-template-columns:minmax(0,1fr)}
  .g-side{position:sticky;top:0;height:auto;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:14px;padding:14px 16px;background:rgba(247,246,244,.92);z-index:2}
  .g-side .yrs{display:flex;gap:12px}.g-side .back{margin:0 0 0 auto}
  .g-main{padding:12px 16px 60px}
  .g-mix .row{flex-direction:column;align-items:stretch}.g-mix .row figure{width:100%!important}
  .g-roll .g-main{height:calc(var(--gh) - 50px);padding:20px 16px}
  .g-roll img{height:calc(var(--gh) - 170px)}
}

.pos.quiet{transform:translateX(-50%);font-family:var(--f-serif);font-size:13px;letter-spacing:.32em;color:#7d7884}
.pos{transition:opacity .45s ease}

/* quiet motion */
.anim-settle .slip,.anim-breathe .slip,.anim-para .slip{transition:transform .2s ease,background-color 1.2s,opacity .9s ease,translate .9s cubic-bezier(.2,.75,.25,1),rotate .9s cubic-bezier(.2,.75,.25,1)}
.anim-settle .pos,.anim-breathe .pos,.anim-para .pos{transition:opacity .8s ease var(--dl,0s)}
.anim-settle .pos.gone .slip,.anim-breathe .pos.gone .slip,.anim-para .pos.gone .slip{translate:0 -16px;rotate:2.5deg}
.anim-settle .pos .slip,.anim-breathe .pos .slip,.anim-para .pos .slip{transition-delay:0s,0s,var(--dl,0s),var(--dl,0s),var(--dl,0s)}
.anim-breathe .pos.live .slip{animation:breathe var(--bd,9s) ease-in-out var(--bdl,0s) infinite}
@keyframes breathe{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -2.5px;rotate:.4deg}}
.anim-para .pos.live .slip{translate:calc(var(--mx,0) * var(--dep,3) * 1px) calc(var(--my,0) * var(--dep,3) * 1px);transition:transform .2s ease,background-color 1.2s,translate 1.1s cubic-bezier(.2,.7,.3,1)}
@media (prefers-reduced-motion:reduce){.anim-breathe .pos.live .slip{animation:none}.anim-para .pos.live .slip{translate:none}}

/* moon */
.moon-sky{position:absolute;right:9%;top:13%;z-index:2;display:grid;justify-items:center;gap:12px;pointer-events:none;transition:opacity .6s}
.moon-sky svg{width:84px;height:84px;filter:drop-shadow(0 0 16px rgba(255,255,255,.8)) blur(.3px);transition:opacity .4s}
.moon-sky small{font-family:var(--f-serif);font-size:10px;letter-spacing:.24em;color:#6d6874;white-space:nowrap}
.moon-row{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);display:flex;gap:3px;z-index:5;pointer-events:none;transition:opacity .4s}
.moon-row i{display:block;width:8px;height:8px;position:relative;opacity:.5;transition:transform .3s,opacity .3s}
.moon-row i svg{display:block;width:8px;height:8px}
.moon-row i.cur{opacity:1;transform:scale(1.6)}
.moon-row i.has::after{content:"";position:absolute;left:3px;top:12px;width:2px;height:2px;border-radius:50%;background:#8a8590}
.stage:not(.mo-sky) .moon-sky,.stage:not(.mo-row) .moon-row{display:none}
.r-tape .mlab svg{width:11px;height:11px;vertical-align:-1px;margin-right:6px}
.r-tape .mlab em{font-style:normal;color:#8a8590;margin-left:8px}
.stage.mo-needle .r-tape .needle::after{display:none}
@media (max-width:560px){.moon-sky{right:6%;top:10%}.moon-sky svg{width:60px;height:60px}.moon-row{gap:2px}.moon-row i,.moon-row i svg{width:7px;height:7px}}
/* gallery texture */
.gal.tx-frost,.gal.tx-vellum,.gal.tx-mat{background:rgba(246,245,248,.4);-webkit-backdrop-filter:blur(28px) saturate(1.05);backdrop-filter:blur(28px) saturate(1.05)}
.stage.gal-on #slips,.stage.gal-on .ruler,.stage.gal-on .moon-sky,.stage.gal-on .moon-row{opacity:0;pointer-events:none}
.g-main .fr{position:relative;display:block}
.g-main .vel{display:none}
.tx-vellum .g-main .vel{display:flex;gap:12px;flex-wrap:wrap;position:absolute;left:-10px;right:30%;bottom:-16px;padding:10px 14px 11px;
  background:rgba(250,249,252,.52);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 4px 12px rgba(50,40,70,.08);
  transform:rotate(-.6deg);font-family:var(--f-serif);font-size:11px;letter-spacing:.12em;color:#4a4652;transition:transform .6s ease,opacity .6s ease}
.tx-vellum .g-main .vel b{font-weight:400;color:#2c2932}
.tx-vellum .g-main figure:hover .vel{transform:rotate(-.6deg) translateY(12px);opacity:.5}
.tx-vellum .g-main figcaption{visibility:hidden}
.tx-mat .g-main .fr{padding:14px;background:rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 8px 24px rgba(50,40,70,.08)}
.gal.tx-frost .g-side,.gal.tx-vellum .g-side,.gal.tx-mat .g-side{background:transparent}
.detail.tx-frost .d-paper,.detail.tx-vellum .d-paper,.detail.tx-mat .d-paper{background:var(--dpa,rgba(247,245,242,.72));-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}
.detail.tx-frost .d-back,.detail.tx-vellum .d-back,.detail.tx-mat .d-back{background:linear-gradient(var(--dpa,rgba(247,245,242,.84)) 62%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-mask:linear-gradient(#000 70%,transparent);mask:linear-gradient(#000 70%,transparent)}
.detail.tx-mat .d-roll img,.detail.tx-mat .d-obj .ims img{padding:12px;background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
/* nav over overlays */
.stage.gal-on .s-nav{z-index:15}
.stage.gal-on .s-nav>span:first-child{visibility:hidden}
.s-nav{transition:opacity .4s}
.stage.det-on .s-nav{opacity:0;pointer-events:none}
.stage.det-on .s-nav .go{pointer-events:none}
@media (max-width:640px){.gal .g-side .nm{display:none}.gal .g-side{padding-top:56px}}
@media (max-width:640px){.gal.tx-frost .g-side,.gal.tx-vellum .g-side,.gal.tx-mat .g-side{background:rgba(247,246,244,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);z-index:6}.g-side .yrs{overflow-x:auto;max-width:100%;scrollbar-width:none}.g-side .yrs button{white-space:nowrap;flex:none}}

details.done{border-top:1px solid var(--line);padding-top:10px}
details.done summary{cursor:pointer;font-size:13px;color:var(--muted);text-align:center;list-style-position:inside}
details.done .controls{margin-top:14px}
/* soft year ruler */
.ruler.r-soft{width:min(600px,88%);height:76px;cursor:pointer;overflow:visible;-webkit-mask-image:none;mask-image:none;touch-action:none}
.r-soft .line{position:absolute;left:0;right:0;width:100%;top:40px;height:12px;overflow:visible}
.r-soft .line path{fill:none;stroke:rgba(60,52,72,.28);stroke-width:1;stroke-linecap:round;vector-effect:non-scaling-stroke}
.r-soft .line path.fut{stroke:rgba(60,52,72,.12);stroke-dasharray:2 4}
.r-soft .curve{position:absolute;left:0;right:0;width:100%;top:14px;height:30px;overflow:visible;pointer-events:none}
.r-soft .curve path{fill:none;stroke:rgba(200,160,110,.55);stroke-width:1;vector-effect:non-scaling-stroke}
.r-soft .curve path.area{fill:rgba(240,210,160,.14);stroke:none}
.r-soft .mk{position:absolute;top:46px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:rgba(60,52,72,.4);transition:background .3s}
.r-soft .mk.fut{background:rgba(60,52,72,.14)}
.r-soft .wk{position:absolute;top:47px;width:2px;height:2px;margin-left:-1px;border-radius:50%;background:rgba(60,52,72,.2)}
.r-soft .wk.fut{background:rgba(60,52,72,.08)}
.r-soft .ml{position:absolute;top:58px;transform:translateX(-50%);font-family:var(--f-serif);font-size:10px;letter-spacing:.14em;color:#8a8590;white-space:nowrap;transition:color .3s}
.r-soft .ml.fut{color:rgba(138,133,144,.4)}
.r-soft .ml.cur{color:#2c2932}
.r-soft .ml:not(.cur){opacity:0;transition:opacity .5s ease,color .3s}
.r-soft:hover .ml,.r-soft.drag .ml,.r-soft:focus-visible .ml{opacity:1;transition:opacity 1.1s ease var(--dd,0s),color .3s}
.r-soft .ev{position:absolute;top:44px;width:6px;height:6px;margin-left:-3px;border-radius:50%;pointer-events:none}
.r-soft .ev.full{background:#fbfaf6;box-shadow:0 0 0 .6px rgba(70,64,84,.35),0 0 6px rgba(255,255,255,.9)}
.r-soft .ev.term{top:38px;width:1px;height:6px;margin-left:0;border-radius:1px;background:rgba(170,120,120,.55)}
.r-soft .ev.term.big{height:9px;top:35px;background:rgba(170,120,120,.7)}
.r-soft .ev{transition:opacity .4s ease}.r-soft .ev:not(.cur){opacity:0}
.r-soft .bead{position:absolute;top:41px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--bd,#e9e4ee) 70%);
  box-shadow:0 0 0 .8px rgba(60,52,72,.35),0 2px 5px rgba(50,40,70,.18);transition:left .42s cubic-bezier(.3,1.5,.45,1);z-index:2}
.r-soft.drag .bead{transition:none}
.r-soft .bead.kick{animation:bump .2s ease-out}
@keyframes bump{40%{transform:scale(1.25)}100%{transform:scale(1)}}
.r-soft .mlab{position:absolute;top:0;left:50%;transform:translateX(-50%);font-family:var(--f-serif);font-size:10px;letter-spacing:.2em;color:#4a4652;white-space:nowrap;transition:left .42s cubic-bezier(.3,1.5,.45,1)}
.r-soft.drag .mlab{transition:none}
.r-soft .mlab em{font-style:normal;color:#8a8590;margin-left:8px}
.r-soft .yl{position:absolute;left:-46px;top:41px;font-family:var(--f-serif);font-size:10px;letter-spacing:.2em;color:#8a8590}
.rs-thread .mk{width:3px;height:3px;top:46.5px;margin-left:-1.5px}
.rs-thread .wk{display:none}
.rs-glass::before{content:"";position:absolute;left:-8px;right:-8px;top:41px;height:10px;border-radius:5px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.14));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.95),inset 0 0 0 .5px rgba(255,255,255,.45),0 2px 6px rgba(60,50,80,.05)}
.rs-glass .line{display:none}
.rs-glass .mk{width:.5px;height:4px;top:44px;margin-left:-.25px;border-radius:0;background:rgba(80,70,95,.42)}
.rs-glass .mk.fut{background:rgba(80,70,95,.16)}
.rs-glass .bead{width:7px;height:16px;margin-left:-3.5px;top:38px;border-radius:4px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.45));
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.9),0 1px 4px rgba(60,50,80,.16)}
.rs-glass .ev.term{top:35px;height:4px}.rs-glass .ev.term.big{top:34px;height:5px}
.rs-glass .ev.full{top:43.5px;width:4px;height:4px;margin-left:-2px}

.rs-thread .bead{width:9px;height:14px;margin-left:-4.5px;top:39px;border-radius:50% 50% 50% 50%/40% 40% 60% 60%}
@media (max-width:560px){.r-soft .yl{display:none}.r-soft .ml{font-size:9px;letter-spacing:0}.ruler.r-soft{width:92%}}
/* detail */
.detail{position:absolute;inset:0;z-index:16;visibility:hidden;pointer-events:none}
.detail.open{visibility:visible;pointer-events:auto}
.d-scrim{position:absolute;inset:0;background:rgba(238,236,242,.3);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);opacity:0;transition:opacity .5s ease}
.detail.m-sheet.shown .d-scrim{opacity:1}
.d-paper{position:absolute;inset:0;background:var(--dp,#f7f5f2);overflow-y:auto;color:#2c2932;-webkit-overflow-scrolling:touch}
.d-in{opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.detail.shown .d-in{opacity:1;transform:none;transition-delay:.32s}
.detail.m-sheet .d-paper{top:5%;left:4%;right:4%;box-shadow:0 -8px 30px rgba(50,40,70,.16);transform:translateY(104%);transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.detail.m-sheet.shown .d-paper{transform:none}
.detail.m-page{perspective:1800px}
.detail.m-page .d-paper{transform-origin:0 50%;transform:rotateY(-92deg);transition:transform .75s cubic-bezier(.25,.75,.25,1),box-shadow .75s;box-shadow:30px 0 60px rgba(50,40,70,.25)}
.detail.m-page.shown .d-paper{transform:none;box-shadow:0 0 0 rgba(0,0,0,0)}
.detail.m-unfold .d-paper{transition:clip-path .62s cubic-bezier(.65,0,.25,1),background-color .62s ease}
.d-back{position:sticky;top:0;z-index:2;display:block;width:100%;text-align:left;padding:20px 26px 12px;border:0;cursor:pointer;background:linear-gradient(var(--dp,#f7f5f2) 70%,transparent);
  font-family:var(--f-serif);font-size:12px;letter-spacing:.16em;color:#6d6874}
.d-back:hover{color:#2c2932}
.d-meta{font-family:var(--f-serif);font-size:11px;letter-spacing:.22em;color:#8a8590;margin:0 0 14px}
.d-h{font-family:var(--f-serif);font-weight:500;font-size:30px;line-height:1.35;letter-spacing:.04em;margin:0 0 30px}
.d-art{max-width:560px;margin:0 auto;padding:30px 24px 90px}
.d-art p.t{font-family:var(--f-serif);font-size:16px;line-height:2.1;letter-spacing:.04em;margin:0 0 1.4em;color:#36323e}
.d-art img{display:block;width:100%;margin:26px 0 30px}
.d-ser .hd{padding:30px 48px 26px}
.d-roll{display:flex;gap:28px;overflow-x:auto;padding:0 48px 48px;scrollbar-width:thin;cursor:grab}
.d-roll img{display:block;height:min(62vh,calc(var(--gh,600px) * .62));width:auto;flex:none}
.d-obj{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;padding:30px 48px 80px;align-items:start}
.d-obj .ims{display:grid;gap:20px}.d-obj .ims img{display:block;width:100%}
.d-obj .inf{position:sticky;top:64px}
.d-obj dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-family:var(--f-serif);font-size:13px;margin:0 0 22px}
.d-obj dt{color:#8a8590;letter-spacing:.14em}.d-obj dd{margin:0}
.d-obj p{font-family:var(--f-serif);font-size:14px;line-height:2;margin:0 0 24px;color:#4a4652}
.d-shop{display:inline-block;font-family:var(--f-serif);font-size:13px;letter-spacing:.14em;color:#2c2932;padding:6px 14px 7px;background:var(--soft,#ddd6e3);text-decoration:none;clip-path:polygon(1% 6%,99% 0,100% 94%,0 100%)}
.g-list{display:grid;gap:12px;max-width:620px}
.g-list button{display:flex;align-items:baseline;gap:12px;border:0;background:none;padding:0;cursor:pointer;font-family:var(--f-serif);font-size:16px;color:#2c2932;text-align:left}
.g-list button .lead{flex:1;border-bottom:1px dotted rgba(60,50,80,.28);transform:translateY(-5px)}
.g-list button small{font-size:11px;letter-spacing:.14em;color:#8a8590}
.g-list button:hover span:first-child{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.g-main figure{cursor:zoom-in}
@media (max-width:640px){.d-obj{grid-template-columns:minmax(0,1fr);padding:20px 16px 60px;gap:24px}.d-obj .inf{position:static}.d-roll{padding:0 16px 40px}.d-ser .hd{padding:24px 16px 20px}.d-h{font-size:24px}
  .detail.m-sheet .d-paper{left:0;right:0;top:4%}}
@media (prefers-reduced-motion:reduce){.d-paper,.d-in{transition:none!important}}
/* ceramics column */
.g-main .ob{cursor:pointer}
.ob .pl{display:block}
.ob .pl img{aspect-ratio:1/1;object-fit:cover;background:none}
.ob .ot b{display:block;font-family:var(--f-serif);font-weight:500;font-size:16px;letter-spacing:.06em;color:#2c2932}
.ob .ot small{display:block;font-family:var(--f-serif);font-size:11px;letter-spacing:.16em;color:#8a8590;margin:6px 0 0}
.ob .nl{display:none}
.ob .ot p{font-family:var(--f-serif);font-size:13px;line-height:1.95;color:#4a4652;margin:12px 0 0}
.ob .more{display:inline-block;margin-top:10px;font-family:var(--f-serif);font-size:12px;letter-spacing:.12em;color:#8a8590;transition:color .2s}
.ob:hover .more{color:#2c2932}
.g-o-shelf .obs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:56px 44px;max-width:1080px}
.g-main .ob{position:relative;isolation:isolate}
.ob .pps{display:none}
.ob-cut .ob .pps,.ob-torn .ob .pps{display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;filter:drop-shadow(0 1px 1px rgba(60,50,70,.12)) drop-shadow(0 8px 18px rgba(60,50,70,.08));transform:rotate(var(--prot,0deg))}
.ob .pp{position:absolute;inset:0;background:linear-gradient(170deg,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),var(--pc,#f1ecef)}
.ob-cut .ob .pp{clip-path:var(--cut)}
.ob-torn .ob .pp{clip-path:var(--torn)}
.ob-cut .ob .ot b,.ob-torn .ob .ot b{display:inline-block;background:var(--sl,#e6dde6);padding:3px 10px 4px;transform:rotate(var(--trot,0deg));box-shadow:0 1px 2px rgba(60,50,70,.12);margin-left:-4px}
.ob-cut.g-o-shelf .ob,.ob-torn.g-o-shelf .ob{padding:20px 20px 24px}
.ob-cut.g-o-note .ob,.ob-torn.g-o-note .ob{padding:44px 52px}
.ob-cut.g-o-single .ob,.ob-torn.g-o-single .ob{margin:0 6% 32px;padding:40px 24px}
@media (max-width:640px){.ob-cut.g-o-note .ob,.ob-torn.g-o-note .ob{padding:20px 16px 24px}.ob-cut.g-o-shelf .ob,.ob-torn.g-o-shelf .ob{padding:10px 10px 14px}}
.pt-fiber{--tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.035 0.16' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .31  0 0 0 0 .28  .3 0 0 0 -.115'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.09 0.006' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  .55 0 0 0 -.26'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E")}
.pt-washi{--tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.022' numOctaves='4' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4  0 0 0 0 .35  0 0 0 0 .32  .26 0 0 0 -.075'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' stitchTiles='stitch' baseFrequency='0.035 0.16' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .36  0 0 0 0 .31  0 0 0 0 .28  .3 0 0 0 -.115'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E")}
.pt-laid{--tex:repeating-linear-gradient(0deg,rgba(90,80,72,.045) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(90,80,72,.022) 0 1px,transparent 1px 34px)}
.pt-none{--tex:linear-gradient(transparent,transparent)}
.ob .pp{background:var(--tex),linear-gradient(170deg,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),var(--pc,#f1ecef)}
.ob-cut .ob{--shape:var(--cut);--shape2:var(--cut2)}.ob-torn .ob{--shape:var(--torn);--shape2:var(--torn2)}
.ob .pp2,.ob .tp{display:none}
.pv-layer .ob .pp2{display:block;position:absolute;inset:0;background:var(--tex),var(--pc2);clip-path:var(--shape2);transform:translate(9px,10px) rotate(var(--prot2))}
.pv-tape .ob .tp{display:block;position:absolute;z-index:3;pointer-events:none;
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 2%,16% 9%,20% 0,100% 0,97% 22%,100% 40%,96% 60%,99% 80%,95% 100%,0 96%,3% 74%,0 52%,4% 30%)}
.pv-tape .ob .t1{left:var(--tx1);top:-9px;width:var(--tw1);height:var(--th1);background:var(--tpat1),var(--tex),var(--tp);transform:rotate(var(--tr1))}
.pv-tape .ob .t2{right:var(--tx2);bottom:-9px;width:var(--tw2);height:var(--th2);background:var(--tpat2),var(--tex),var(--tp2);transform:rotate(calc(var(--tr2) * -1)) scaleX(-1)}
.pv-split .ob .pps{display:none!important}
.pv-split.ob-cut .ob .pl,.pv-split.ob-torn .ob .pl,.pv-split.ob-cut .ob .ot,.pv-split.ob-torn .ob .ot{position:relative;filter:drop-shadow(0 1px 1px rgba(60,50,70,.12)) drop-shadow(0 8px 16px rgba(60,50,70,.08))}
.pv-split.ob-cut .ob .pl,.pv-split.ob-torn .ob .pl{padding:14px}
.pv-split.ob-cut .ob .ot,.pv-split.ob-torn .ob .ot{padding:20px 22px 22px;margin-top:-18px;margin-left:10%}
.pv-split .ob .pl::before,.pv-split .ob .ot::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tex),linear-gradient(170deg,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),var(--pc)}
.pv-split .ob .pl::before{clip-path:var(--shape);transform:rotate(var(--prot))}
.pv-split .ob .ot::before{clip-path:var(--shape2);transform:rotate(var(--prot2));background:var(--tex),var(--pc2)}
.pv-split.g-o-note .ob .ot{margin:0 0 0 -40px}
.pv-split.ob-cut.g-o-note .ob,.pv-split.ob-torn.g-o-note .ob{padding:24px 0}
.pv-split.ob-cut.g-o-single .ob,.pv-split.ob-torn.g-o-single .ob{padding:30px 0}
.pv-split.g-o-single .ob .ot{margin-left:0}
.pv-paste .ob .pps{transform:rotate(calc(var(--prot,0deg) * .3));filter:drop-shadow(0 .5px .4px rgba(60,50,70,.24)) drop-shadow(5px 7px 5px rgba(60,50,70,.07))}
.pv-paste .ob .pp{background:linear-gradient(118deg,transparent 38%,rgba(255,255,255,.4) 45%,rgba(120,100,90,.06) 48.5%,transparent 54%),linear-gradient(64deg,transparent 62%,rgba(120,100,90,.05) 66%,rgba(255,255,255,.3) 68%,transparent 73%),var(--tex),var(--pc,#f1ecef);
  box-shadow:inset 0 0 0 1.5px rgba(120,100,90,.07),inset 0 0 14px rgba(120,100,90,.07)}
.ob-torn .ob .pps{transform:none}
.ob-torn .ob .pps::before{content:"";position:absolute;inset:-2px;background:rgba(255,255,255,.75);clip-path:var(--torn2);filter:blur(.4px)}
.ob-torn .ob .ot b{transform:none}
.ob-torn.pv-layer .ob .pp2{transform:translate(6px,7px)}
.ob-torn.pv-split .ob .pl::before,.ob-torn.pv-split .ob .ot::before{transform:none}
.ob-torn.pv-paste .ob .pps{transform:none}
/* photos: handmade touch */
.k-y .g-main .fr{position:relative;display:block}
.k-y .g-main .fr i{display:none}
.ph-corner.k-y .g-main .pc{display:block;position:absolute;z-index:2;width:34px;height:34px;background:var(--tex),linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,0)),var(--sl);
  filter:drop-shadow(0 1px 1.5px rgba(60,50,70,.28)) drop-shadow(0 3px 6px rgba(60,50,70,.08));pointer-events:none}
.ph-corner .pc.a{top:-6px;left:-6px;clip-path:polygon(0 0,100% 0,0 100%)}
.ph-corner .pc.b{top:-6px;right:-6px;clip-path:polygon(0 0,100% 0,100% 100%)}
.ph-corner .pc.c{bottom:-6px;right:-6px;clip-path:polygon(100% 0,100% 100%,0 100%)}
.ph-corner .pc.d{bottom:-6px;left:-6px;clip-path:polygon(0 0,100% 100%,0 100%)}
.ph-tape.k-y .g-main .ptp{display:block;position:absolute;z-index:2;top:-11px;left:var(--tl,50%);width:92px;height:24px;margin-left:-46px;background:var(--tex),var(--tp);transform:rotate(var(--trot));pointer-events:none;
  clip-path:polygon(0 8%,4% 0,8% 10%,12% 2%,16% 9%,20% 0,100% 0,97% 22%,100% 40%,96% 60%,99% 80%,95% 100%,0 96%,3% 74%,0 52%,4% 30%)}
.ph-corner.k-y .g-main figcaption,.ph-tape.k-y .g-main figcaption,.ph-slip.k-y .g-main figcaption{align-items:baseline;margin-top:14px}
.ph-corner.k-y .g-main figcaption b,.ph-tape.k-y .g-main figcaption b,.ph-slip.k-y .g-main figcaption b{display:inline-block;font-size:13px;letter-spacing:.06em;color:#22211e;padding:3px 9px 4px;
  background:var(--tex),var(--sl);box-shadow:0 1px 2px rgba(60,50,70,.14);transform:rotate(-.6deg)}
.ph-slip.k-y .g-main figcaption span{background:var(--tex),var(--pc);padding:2px 7px;box-shadow:0 1px 1px rgba(60,50,70,.1);color:#5d5864}
.ph-corner.k-y .g-main h2,.ph-tape.k-y .g-main h2,.ph-slip.k-y .g-main h2{align-self:flex-start;width:fit-content;padding:8px 4px;background:var(--tex),rgba(255,255,255,.55);box-shadow:0 1px 2px rgba(60,50,70,.1);color:#4a4652}
.g-roll.ph-corner .g-main,.g-roll.ph-tape .g-main{padding-top:64px}
.ob-light .ob .ot b{display:table;background:var(--sl,#e6dde6);padding:3px 10px 4px;transform:rotate(var(--trot,0deg));box-shadow:0 1px 2px rgba(60,50,70,.14);margin-left:-4px}
.ob-light .ob .ot small{display:table;background:rgba(255,255,255,.62);padding:2px 8px;margin-top:8px;box-shadow:0 1px 1px rgba(60,50,70,.1);transform:rotate(calc(var(--trot,0deg) * -.6))}
.ob-light.g-o-single .ob .ot b,.ob-light.g-o-single .ob .ot small,.ob-light.g-o-single .ob .nl{margin-left:auto!important;margin-right:auto!important}
.ob-light.g-o-note .ob .nl,.ob-light.g-o-single .ob .nl{display:table!important;font-size:11px!important;letter-spacing:.3em!important;width:auto!important;border:0!important;background:var(--sl,#e6dde6);padding:2px 8px!important;margin-top:16px!important;box-shadow:0 1px 1px rgba(60,50,70,.1);color:#4a4652!important}
.ob-light .ob::before{content:"";position:absolute;inset:-8% -6%;z-index:-1;pointer-events:none;
  background:linear-gradient(112deg,transparent 14%,rgba(255,249,236,.85) 26%,rgba(255,249,238,.18) 38%,transparent 44%,rgba(255,246,230,.72) 52%,rgba(255,247,234,.12) 63%,transparent 70%);
  filter:blur(16px);animation:winlight 36s ease-in-out var(--ld,0s) infinite alternate}
@keyframes winlight{from{transform:translateX(-7%);opacity:.65}to{transform:translateX(7%);opacity:1}}
.ob-light .ob .pl img{box-shadow:14px 18px 34px -12px rgba(90,70,60,.22)}
.ob-emerge .g-main figure.ob{opacity:0;filter:blur(12px);transform:none;transition:opacity 2.8s ease,filter 2.8s ease}
.ob-emerge .g-main figure.ob.in{opacity:1;filter:blur(0)}
.ob-emerge .ob .ot{opacity:0;transition:opacity 2.2s ease 1.6s}.ob-emerge .ob.in .ot{opacity:1}
.ob-none .g-main figure.ob{transition-duration:1.6s}
.ob-none .ob .ot b{display:table;background:rgba(255,255,255,.5);padding:2px 9px 3px;box-shadow:0 1px 1px rgba(60,50,70,.08);margin-left:-4px}
.ob-none.g-o-single .ob .ot b{margin-left:auto;margin-right:auto}
@media (prefers-reduced-motion:reduce){.ob-light .ob::before{animation:none}.ob-emerge .g-main figure.ob,.ob-emerge .ob .ot{transition:none;opacity:1;filter:none}}
.g-o-shelf .ob{padding:22px 22px 26px}
.g-o-shelf .ob .ot{padding-top:16px}
.g-o-shelf .ob .ot p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.g-o-note .obs{display:grid;gap:calc(var(--gh) * .16);max-width:980px}
.g-o-note .ob{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding:56px 64px}
.g-o-note .ob:nth-child(even) .pl{order:2}
.g-o-note .ob .nl{display:block;font-family:var(--f-serif);font-size:11px;letter-spacing:.3em;color:#8a8590;margin:26px 0 0;padding-top:14px;border-top:1px solid rgba(60,50,80,.12);width:fit-content;white-space:nowrap}
.g-o-note .ob .ot b{font-size:20px}
.g-o-note .ob .ot p{font-size:15px;line-height:2.1;margin-top:10px;max-width:24em}
.gal.g-o-single{scroll-snap-type:y proximity}
.g-o-single .obs{display:grid}
.g-o-single .ob{min-height:calc(var(--gh) - 60px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;scroll-snap-align:center;padding:40px 24px;margin-bottom:28px}
.g-o-single .ob .pl{width:min(46vh,calc(var(--gh) * .5),100%)}
.g-o-single .ob .ot{max-width:400px;padding-top:22px}
.g-o-single .ob .nl{display:block;font-family:var(--f-serif);font-size:11px;letter-spacing:.3em;color:#8a8590;margin:20px 0 0}
.g-o-single .ob .ot p{font-size:14px;margin-top:8px}
.g-o-single section h2{margin-bottom:0}
/* ceramics detail */
.d-cer{max-width:1040px;margin:0 auto;padding:30px 48px 90px}
.d-cer .hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:end}
.d-cer .pl{display:block}
.d-cer .pl img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.d-cer dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-family:var(--f-serif);font-size:13px;margin:0 0 26px}
.d-cer dt{color:#8a8590;letter-spacing:.14em}.d-cer dd{margin:0}
.d-cer .note{max-width:520px;margin:12vh auto 11vh}
.d-cer .note .nl{font-family:var(--f-serif);font-size:11px;letter-spacing:.34em;color:#8a8590;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid rgba(60,50,80,.12);width:fit-content;white-space:nowrap}
.d-cer .note p{font-family:var(--f-serif);font-size:16px;line-height:2.15;letter-spacing:.04em;color:#36323e;margin:0 0 1.2em}
.d-cer .note .sig{text-align:right;font-size:12px;letter-spacing:.18em;color:#8a8590;margin-top:28px}
.d-cer .more{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.d-cer .more img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
@media (max-width:640px){
  .g-o-note .ob{grid-template-columns:minmax(0,1fr);gap:18px;padding:22px 18px 26px}.g-o-shelf .ob{padding:12px 12px 16px}.g-o-note .ob:nth-child(even) .pl{order:0}
  .g-o-shelf .obs{grid-template-columns:1fr 1fr;gap:34px 18px}.g-o-shelf .ob .ot p{display:none}
  .d-cer{padding:20px 16px 60px}.d-cer .hero{grid-template-columns:minmax(0,1fr);gap:24px}.d-cer .note{margin:56px auto}.d-cer .more{gap:12px}
}

@media (prefers-reduced-motion:reduce){.g-main figure{transition:none;opacity:1;transform:none}.r-tape .needle.kick{animation:none}}

/* ---- letters ---- */
.s-nav .go-m{pointer-events:auto;cursor:pointer;border-bottom:1px solid transparent;transition:border-color .2s}
.s-nav .go-m:hover,.s-nav .go-m:focus-visible,.stage.mail-on .s-nav .go-m{border-bottom-color:#2a2926;outline:none}
.stage.mail-on #slips,.stage.mail-on .ruler,.stage.mail-on .moon-sky,.stage.mail-on .moon-row{opacity:0;pointer-events:none}
.stage.mail-on .s-nav{z-index:15}.stage.mail-on .s-nav>span:first-child{visibility:hidden}
.mail{position:absolute;inset:0;z-index:14;overflow-y:auto;overflow-x:hidden;opacity:0;pointer-events:none;transition:opacity .45s ease;color:#2c2932;
  display:grid;grid-template-columns:150px minmax(0,1fr);align-items:start;background:rgba(255,255,255,.08)}
.mail.open{opacity:1;pointer-events:auto}
.m-side{position:sticky;top:0;height:var(--gh,600px);padding:22px 0 22px 26px;display:flex;flex-direction:column;gap:18px;font-family:var(--f-serif)}
.m-side .nm{font-family:var(--f-sans);font-size:13px;letter-spacing:.12em;cursor:pointer;align-self:flex-start;border-bottom:1px solid transparent;transition:border-color .2s}
.m-side .nm:hover,.m-side .nm:focus-visible{border-bottom-color:#2a2926;outline:none}
.m-side .ti{font-size:12px;letter-spacing:.3em;color:#8a8590;margin-top:4px}
.m-side p{font-size:12px;line-height:2;color:#6d6874;margin:0;max-width:9em}
.m-side .back{margin-top:auto;font-family:var(--f-serif);font-size:12px;letter-spacing:.14em;color:#8a8590;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.m-side .back:hover{color:#2c2932}
.m-main{padding:58px 48px 80px 8px;min-width:0}
.m-desk{position:relative;max-width:540px;margin:0 auto;padding-top:10px}
.m-paper{position:relative;padding:34px 38px 26px;background:linear-gradient(170deg,rgba(255,255,255,.58),rgba(255,255,255,.34));-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.35),0 14px 40px rgba(60,50,80,.08);transition:opacity .35s ease}
.m-paper .to{font-family:var(--f-serif);font-size:15px;letter-spacing:.08em;margin:0 0 6px;color:#36323e}
.m-paper textarea{display:block;width:100%;box-sizing:border-box;border:0;outline:none;resize:none;background:repeating-linear-gradient(transparent 0 31px,rgba(80,70,100,.1) 31px 32px);
  font-family:var(--f-serif);font-size:15px;line-height:32px;letter-spacing:.05em;color:#2c2932;padding:0;height:224px}
.m-paper textarea::placeholder{color:#a9a3b0}
.m-paper textarea.need{animation:need .5s ease}
@keyframes need{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.m-paper .sg{display:flex;gap:18px;margin-top:22px;align-items:flex-end}
.m-paper input{flex:1;min-width:0;border:0;border-bottom:1px solid rgba(80,70,100,.16);background:none;outline:none;font-family:var(--f-serif);font-size:13px;letter-spacing:.06em;padding:4px 0;color:#2c2932}
.m-paper input:focus{border-bottom-color:rgba(80,70,100,.4)}
.m-paper input::placeholder{color:#a9a3b0}
.m-paper .ft{display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-family:var(--f-serif);font-size:11px;letter-spacing:.14em;color:#8a8590}
.m-paper .vis{display:flex;gap:8px;align-items:baseline;margin-top:20px;font-family:var(--f-serif);font-size:12px;letter-spacing:.1em;color:#8a8590}
.m-paper .vis i{font-style:normal;color:#c2bcc8}
.m-paper .vis button{border:0;background:none;padding:0 0 2px;cursor:pointer;font:inherit;letter-spacing:inherit;color:#a9a3b0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.m-paper .vis button[aria-checked="true"]{color:#2c2932;border-bottom-color:rgba(44,41,50,.5)}
.m-paper .vis button:hover{color:#4a4652}
.m-pv{text-align:center;font-family:var(--f-serif);font-size:12px;letter-spacing:.14em;color:#8a8590;margin:34px 0 0}
.m-send{border:0;cursor:pointer;font-family:var(--f-serif);font-size:13px;letter-spacing:.3em;color:#2c2932;padding:7px 16px 8px 19px;background:var(--mt,#ddd6e3);clip-path:polygon(1% 6%,99% 0,100% 94%,0 100%);transition:transform .2s}
.m-send:hover{transform:rotate(-1deg)}
.m-paper.sent{opacity:0}
.m-done{text-align:center;font-family:var(--f-serif);font-size:13px;letter-spacing:.14em;color:#4a4652;min-height:22px;margin:22px 0 0;opacity:0;transition:opacity .8s ease}
.m-done.on{opacity:1}
.m-done b{font-weight:500}
.m-fly{position:absolute;z-index:4;pointer-events:none;background:linear-gradient(170deg,rgba(255,255,255,.8),rgba(255,255,255,.6));box-shadow:inset 0 1px 0 #fff,0 10px 30px rgba(60,50,80,.1);transform-origin:50% 50%}
.m-fly::before,.m-fly::after{content:"";position:absolute;left:0;right:0;height:1px;background:rgba(80,70,100,.14);opacity:0;transition:opacity .3s}
.m-fly::before{top:33.3%}.m-fly::after{top:66.6%}
.m-fly.creased::before,.m-fly.creased::after{opacity:1}
/* envelope */
.m-env{position:absolute;left:50%;width:280px;height:168px;margin-left:-140px;perspective:900px;opacity:0;pointer-events:none;z-index:3}
.m-env .eb{position:absolute;inset:0;background:var(--ec,#ece6ee);box-shadow:0 12px 34px rgba(60,50,80,.14)}
.m-env .ef{position:absolute;inset:0;z-index:5;background:linear-gradient(180deg,var(--ef,#f4eff4),var(--ec,#ece6ee));clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.m-env .fl{position:absolute;left:0;right:0;top:0;height:60%;z-index:6;background:var(--fl,#e3dbe6);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform:rotateX(180deg);backface-visibility:visible}
.m-env .who{position:absolute;z-index:7;left:28px;bottom:26px;font-family:var(--f-serif);font-size:12px;letter-spacing:.18em;color:#4a4652}
.m-env .stp{position:absolute;z-index:7;right:20px;top:16px;width:34px;height:42px;background:var(--st,#d9cfd8);outline:1px dashed rgba(255,255,255,.9);outline-offset:-3px}
.pm{position:absolute;z-index:8;width:62px;height:62px;border-radius:50%;border:1px solid rgba(140,88,100,.55);color:rgba(140,88,100,.75);display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--f-serif);font-size:9px;letter-spacing:.12em;line-height:1.5;transform:rotate(-14deg);box-shadow:inset 0 0 0 3px transparent,inset 0 0 0 4px rgba(140,88,100,.25)}
.pm b{font-size:12px;font-weight:500;letter-spacing:.2em}
.m-env .pm{right:34px;top:18px;opacity:0}
/* slot */
.m-slot{display:none;position:relative;height:64px;margin:0 auto 26px;max-width:540px;background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.22));-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 24px rgba(60,50,80,.06);border-radius:4px}
.m-slot i{position:absolute;left:50%;top:50%;width:62%;height:7px;margin:-3px 0 0 -31%;border-radius:4px;background:linear-gradient(180deg,rgba(60,50,80,.28),rgba(60,50,80,.08));box-shadow:inset 0 1px 2px rgba(40,30,60,.25),0 1px 0 rgba(255,255,255,.8)}
.m-slot span{position:absolute;right:16px;bottom:8px;font-family:var(--f-serif);font-size:10px;letter-spacing:.3em;color:#8a8590}
.m-slot.glow i{animation:glow .8s ease}
@keyframes glow{40%{box-shadow:inset 0 1px 2px rgba(40,30,60,.25),0 0 14px rgba(255,255,255,.95)}}
.ms-slot .m-slot{display:block}
/* strip */
.m-fslip{position:absolute;z-index:4;pointer-events:none;white-space:nowrap;font-family:var(--f-serif);font-size:15px;letter-spacing:.05em;padding:3px 10px 4px;background:var(--mt,#ddd6e3);color:#22211e;box-shadow:0 1px 2px rgba(60,50,80,.12)}
/* received letters */
.m-list{max-width:760px;margin:13vh auto 0}
.m-list h3{font-family:var(--f-serif);font-weight:400;font-size:12px;letter-spacing:.32em;color:#8a8590;margin:0 0 28px;text-align:center}
.m-count{text-align:center;font-family:var(--f-serif);font-size:13px;letter-spacing:.14em;line-height:2.2;color:#6d6874}
.m-count .pm{position:relative;display:inline-flex;margin:0 auto 18px}
.m-stack{display:flex;flex-wrap:wrap;justify-content:center;gap:26px 10px;padding:0 10px}
.env-s{position:relative;width:150px;height:92px;border:0;padding:0;cursor:pointer;background:var(--ec);box-shadow:0 6px 18px rgba(60,50,80,.09);transform:rotate(var(--r,0deg));transition:transform .35s ease,box-shadow .35s;margin:0 -6px}
.env-s::before{content:"";position:absolute;inset:0;background:var(--fl);clip-path:polygon(0 0,100% 0,50% 52%);opacity:.75}
.env-s:hover,.env-s:focus-visible{transform:rotate(0deg) translateY(-6px);box-shadow:0 14px 28px rgba(60,50,80,.13);outline:none;z-index:2}
.env-s .fr{position:absolute;left:12px;bottom:10px;font-family:var(--f-serif);font-size:11px;letter-spacing:.14em;color:#4a4652}
.env-s .pm{width:40px;height:40px;right:8px;top:8px;font-size:7px;letter-spacing:.04em}
.env-s .pm b{font-size:9px}
.env-s.new{animation:drop .9s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){
  .m-stack{display:block;position:relative;height:150px;padding:0;--sp:min(150px,calc((min(860px,100vw - 360px) - 170px) / max(1,var(--n) - 1)))}
  .m-stack .env-s{position:absolute;left:50%;top:22px;margin:0 0 0 -75px;z-index:calc(var(--n) - var(--k));
    --x:calc(var(--k) * 3px);--y:calc(var(--k) * -2px);--rr:calc(var(--r) * .7);
    transform:translate(var(--x),var(--y)) rotate(var(--rr));transition:transform .9s cubic-bezier(.25,.8,.25,1) calc(var(--k) * 40ms),box-shadow .5s}
  .m-stack:hover .env-s,.m-stack:focus-within .env-s{--x:calc((var(--k) - var(--c)) * var(--sp));--y:calc(((var(--k) - var(--c)) * (var(--k) - var(--c))) * 1.5px);--rr:calc((var(--k) - var(--c)) * 1.6deg);z-index:calc(var(--k) + 1)}
  .m-stack .env-s:hover,.m-stack .env-s:focus-visible{transform:translate(var(--x),calc(var(--y) - 14px)) rotate(0deg);box-shadow:0 16px 30px rgba(60,50,80,.14);transition-delay:0s;z-index:20}
}
@keyframes drop{from{transform:translateY(-40px) rotate(var(--r));opacity:0}}
.m-wall{display:flex;flex-direction:column;gap:16px;align-items:flex-start;max-width:520px;margin:0 auto}
.m-wall .w{border:0;cursor:pointer;font-family:var(--f-serif);font-size:15px;letter-spacing:.05em;color:#22211e;padding:3px 10px 4px;background:var(--mt);box-shadow:0 1px 2px rgba(60,50,80,.1);
  margin-left:var(--x,0);transform:rotate(var(--r,0deg));transition:transform .25s ease;white-space:nowrap;max-width:calc(100% - var(--x,0px));overflow:hidden;text-overflow:ellipsis}
.m-wall .w small{font-size:10px;letter-spacing:.14em;color:#8a8590;margin-left:10px}
.m-wall .w:hover{transform:rotate(0deg)}
.m-wall .w.new{animation:drop .9s cubic-bezier(.2,.8,.2,1)}
/* reading */
.m-read{position:absolute;inset:0;z-index:18;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease}
.m-read.open{opacity:1;pointer-events:auto}
.m-rs{position:absolute;inset:0;background:rgba(240,236,242,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.m-rp{position:relative;width:min(460px,88%);max-height:86%;overflow:auto;padding:36px 38px 30px;background:linear-gradient(170deg,rgba(255,255,255,.86),rgba(255,255,255,.66));
  box-shadow:inset 0 1px 0 #fff,0 20px 50px rgba(60,50,80,.14);transform:translateY(14px) rotate(-.4deg);transition:transform .5s cubic-bezier(.2,.8,.2,1);font-family:var(--f-serif)}
.m-read.open .m-rp{transform:none}
.m-rp .pm{right:22px;top:20px}
.m-rp .to{font-size:14px;letter-spacing:.08em;color:#6d6874;margin:6px 0 14px}
.m-rp p.t{font-size:15px;line-height:32px;letter-spacing:.05em;color:#2c2932;margin:0;background:repeating-linear-gradient(transparent 0 31px,rgba(80,70,100,.09) 31px 32px)}
.m-rp .by{text-align:right;font-size:12px;letter-spacing:.18em;color:#6d6874;margin:18px 0 0}
.m-rp .re{margin-top:28px;padding-top:18px;border-top:1px solid rgba(80,70,100,.12)}
.m-rp .re .k{font-size:11px;letter-spacing:.3em;color:#8a8590;margin:0 0 8px}
.m-rp .re p{font-size:14px;line-height:2;color:#4a4652;margin:0}
.m-rp .x{position:absolute;left:22px;top:14px;border:0;background:none;cursor:pointer;font-family:var(--f-serif);font-size:12px;letter-spacing:.14em;color:#8a8590;padding:0}
@media (max-width:640px){
  .mail{grid-template-columns:minmax(0,1fr)}
  .m-side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:baseline;padding:56px 16px 6px;gap:12px}
  .m-side .ti{margin:0}.m-side p{max-width:none;flex-basis:100%}.m-side .back{margin:0 0 0 auto;order:-1;flex-basis:100%;text-align:right}
  .m-main{padding:10px 16px 60px}.m-paper{padding:26px 20px 20px}.m-paper .sg{flex-direction:column;align-items:stretch;gap:10px}
  .m-env{width:240px;height:144px;margin-left:-120px}.env-s{width:128px;height:80px}
}
@media (prefers-reduced-motion:reduce){.m-paper,.m-read,.m-rp,.mail,.m-stack .env-s{transition:none}}


/* ---- real site: the stage is the whole window ---- */
html,body{height:100%}
body{margin:0;padding:0!important;overflow:hidden;background:#e3dfe7}
.stage{position:fixed;inset:0;width:auto;height:100vh;height:100dvh;border-radius:0;box-shadow:none}
.s-nav a.go-s{pointer-events:auto;color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.s-nav a.go-s:hover,.s-nav a.go-s:focus-visible{border-bottom-color:#2a2926;outline:none}
.s-nav .go-m{pointer-events:auto;cursor:pointer;border-bottom:1px solid transparent;transition:border-color .2s}
/* year beside the ruler: tap to step back a year */
.r-soft .yl{border:0;background:none;padding:2px 0;cursor:pointer;transition:color .3s}
.r-soft .yl:hover,.r-soft .yl:focus-visible{color:#2c2932;outline:none}
.r-soft .yl:disabled{cursor:default}
.r-soft .ml.has:not(.cur)::after{content:"";position:absolute;left:50%;top:-14px;width:3px;height:3px;margin-left:-1.5px;border-radius:50%;background:rgba(80,70,95,.35)}
@media (max-width:560px){.r-soft .yl{display:block;left:0;top:2px}}
.g-empty{font-family:var(--f-serif);font-size:13px;letter-spacing:.3em;color:#8a8590;padding:40px 0}
.d-roll img{background:#ecebe8}