@charset "UTF-8";
:root{--ease:cubic-bezier(.2,.75,.2,1)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overscroll-behavior:none}body{overflow:hidden;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #ac8956;outline-offset:-3px}button:disabled{opacity:.3}img{user-select:none;-webkit-user-drag:none}.journal{position:relative;width:min(100%,560px);height:100%;height:100dvh;margin:auto;overflow:hidden;background:#fff;transition:background .65s}.page-stage{position:absolute;inset:0;overflow:hidden;touch-action:auto}.page{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none}.page.enter{animation:pageEnter .7s var(--ease) both}.page.enter.up{animation-name:pageEnterUp}.page.leaving{pointer-events:none;animation:pageLeave .65s var(--ease) both}.page.leaving.up{animation-name:pageLeaveUp}.composition{position:relative;flex-shrink:0;overflow:hidden}.composition-base{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;cursor:zoom-in}.layer{position:absolute;display:block;z-index:1;overflow:visible}.entrance,.float{display:block;width:100%;height:100%;pointer-events:none}.layer img{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none}.entrance{opacity:0;will-change:transform,opacity}.seen>.entrance{animation:rise 1.25s var(--ease) both;animation-delay:var(--delay,0ms)}.seen[data-effect=fade]>.entrance{animation-name:fade}.seen[data-effect=ink]>.entrance{animation-name:ink;animation-duration:2.2s}.seen[data-effect=stamp]>.entrance{animation-name:stamp;animation-duration:1.55s}.seen[data-effect=from-left]>.entrance{animation-name:fromLeft;animation-duration:1.75s}.seen[data-effect=from-right]>.entrance{animation-name:fromRight}.seen[data-effect=from-top]>.entrance{animation-name:fromTop;animation-duration:1.5s}.seen[data-effect=wipe]>.entrance{animation-name:wipe;animation-duration:1.7s}.seen[data-effect=photo]>.entrance{animation-name:photo;animation-duration:1.8s;overflow:hidden}.seen[data-effect=photo] img{animation:photoSettle 7s ease-out both}.seen[data-effect=tile]>.entrance{animation-name:tile;animation-duration:1.65s}.seen [data-loop=breathe]{animation:breathe 4.8s ease-in-out infinite;animation-delay:2s}.seen [data-loop=panorama]{animation:panoramaFloat 6s ease-in-out infinite;animation-delay:calc(var(--delay,0ms) + 2s)}.layer[data-target]{cursor:zoom-in}.layer[data-target]:hover .float{filter:brightness(1.06)}
@keyframes pageEnter{from{opacity:0;transform:translateY(5%)}to{opacity:1;transform:none}}@keyframes pageEnterUp{from{opacity:0;transform:translateY(-5%)}to{opacity:1;transform:none}}@keyframes pageLeave{to{opacity:0;transform:translateY(-5%)}}@keyframes pageLeaveUp{to{opacity:0;transform:translateY(5%)}}@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}@keyframes fade{from{opacity:0}to{opacity:1}}@keyframes ink{0%{opacity:0;filter:blur(3px)}35%{opacity:.2;filter:blur(1px)}100%{opacity:1;filter:blur(0)}}@keyframes stamp{0%{opacity:0;transform:scale(.82) translateY(12px);filter:blur(3px)}65%{opacity:1;transform:scale(1.025);filter:blur(0)}100%{opacity:1;transform:none;filter:blur(0)}}@keyframes fromLeft{from{opacity:0;transform:translateX(-65px)}to{opacity:1;transform:none}}@keyframes fromRight{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}@keyframes fromTop{from{opacity:0;transform:translateY(-45px)}to{opacity:1;transform:none}}@keyframes wipe{from{opacity:.25;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes photo{from{opacity:0;clip-path:inset(7% 0 0 0)}to{opacity:1;clip-path:inset(0)}}@keyframes photoSettle{from{transform:scale(1.05)}to{transform:scale(1)}}@keyframes tile{from{opacity:0;transform:translateY(28px) rotate(-7deg) scale(.75)}to{opacity:1;transform:none}}@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.018)}}@keyframes panoramaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
.wave .composition-base{width:112%;height:112%;left:-6%;top:-6%;animation:waveDrift 18s ease-in-out infinite;transform-origin:center}@keyframes waveDrift{0%,100%{transform:translate(-1%,0) rotate(-1.7deg) scale(1.015)}50%{transform:translate(1%,1.5%) rotate(1.7deg) scale(1.04)}}
.page.long{touch-action:pan-y}.long-scroll{width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none}.long-scroll::-webkit-scrollbar{display:none}.long-scroll .composition{max-height:none}.page.panorama{touch-action:pan-x}.panorama-scroll{width:100%;height:100%;overflow-x:auto;overflow-y:hidden;display:flex;align-items:center;overscroll-behavior:contain;touch-action:pan-x;scrollbar-width:none}.panorama-scroll::-webkit-scrollbar{display:none}.panorama-scroll .composition{height:85%;flex-shrink:0}
.dish-window{position:absolute;left:0;width:100%;z-index:3;overflow:hidden;touch-action:none;animation:fade 1.8s ease 400ms both}.dish-track{display:flex;width:100%;height:100%;transition:transform .6s var(--ease);will-change:transform}.dish-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;cursor:zoom-in}.dish-original,.dish-background{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none}.dish-cutout{position:absolute;width:78%;height:auto;max-height:85%;object-fit:contain;left:11%;bottom:15%;pointer-events:none}.dish-window[data-page="15"] .dish-cutout{width:98%;left:1%;bottom:1%;max-height:95%}.dish-window[data-page="33"] .dish-cutout{max-height:74%;bottom:10%}.dish-prev,.dish-next{position:absolute;top:40%;width:34px;height:45px;background:#ffffff38;color:#5c3221;font-size:25px;border-radius:3px;z-index:2;opacity:0;transition:opacity .25s}.dish-prev{left:8px}.dish-next{right:8px}.dish-window:hover .dish-prev,.dish-window:hover .dish-next,.dish-window:focus-within .dish-prev,.dish-window:focus-within .dish-next{opacity:1}.dish-dots{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:4px;padding:5px 7px;border-radius:15px;background:#ffffff5c;opacity:.5}.dish-dots button{width:15px;height:13px;display:grid;place-items:center}.dish-dots button::after{content:"";display:block;height:3px;width:3px;border-radius:50%;background:#927b60}.dish-dots button[aria-current=true]::after{width:12px;border-radius:2px;background:#77283b}
.menu-button{position:absolute;right:9px;top:max(8px,env(safe-area-inset-top));width:34px;height:28px;font-size:23px;letter-spacing:1px;line-height:1;color:#79716a;background:#ffffff40;border-radius:18px;z-index:10;opacity:.25;transition:opacity .3s}.menu-button:hover,.menu-button:focus-visible{opacity:1}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{border:0;padding:0;margin:auto;width:min(100%,560px);max-width:100%;height:100%;height:100dvh;max-height:100%;color:#352b27;background:#fff}dialog::backdrop{background:#0008;backdrop-filter:blur(5px)}dialog[open]{animation:fade .25s ease}.catalog[open]{display:flex;flex-direction:column}.dialog-top{height:64px;display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:1px solid #eee;color:#7a172b;font-size:14px}.dialog-top button,.preview-top button{width:40px;height:40px;font-size:28px;font-weight:200}.catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;padding:20px;overflow-y:auto;align-content:start;flex:1}.catalog-card{min-width:0;text-align:left;font-size:11px;color:#856f60}.catalog-card img{display:block;width:100%;aspect-ratio:9/15;object-fit:cover;object-position:top;background:#f4f2ee;border:1px solid #eee}.catalog-card.active img{outline:1px solid #8b3140;outline-offset:3px}.catalog-card span{display:block;margin-top:8px}.preview{background:#211e1c;color:#f4ebde;overflow:hidden}.preview[open]{display:flex;flex-direction:column}.preview-top{height:64px;min-height:64px;display:flex;align-items:center;justify-content:space-between;padding:10px 15px;z-index:3;font-size:12px;background:#211e1c}.zoom-viewport{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:grab}.zoom-viewport img{display:block;max-width:100%;max-height:100%;object-fit:contain;transform-origin:center;pointer-events:none;will-change:transform}.zoom-tools{display:flex;align-items:center;justify-content:center;gap:12px;min-height:66px;padding-bottom:max(12px,env(safe-area-inset-bottom));background:#211e1c;z-index:3}.zoom-tools button{height:35px;min-width:38px;padding:0 10px;border:1px solid #695e4c;font-size:15px;border-radius:3px}.zoom-tools #zoom-reset,.zoom-tools #preview-whole{font-size:11px}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.entrance{opacity:1!important}}
/* Continuous artwork: opaque photo/banner regions never move as cropped tiles. */
.static-layer>.entrance{visibility:hidden;animation:none!important}.static-layer{background:transparent}
.seen[data-effect=wipe]>.entrance{animation:fade 1.5s ease both;animation-delay:var(--delay,0ms)}
.seen[data-effect=photo]>.entrance{animation:fade 1.5s ease both;overflow:visible}.seen[data-effect=photo] img{animation:none}
@keyframes wipe{from{opacity:0}to{opacity:1}}@keyframes photo{from{opacity:0}to{opacity:1}}
/* A single stationary scene sits behind the transparent object-only rail. */
.dish-window{animation:none;background:transparent}.dish-track,.dish-slide{background:transparent}.dish-slide{overflow:visible}
.dish-cutout,.dish-window[data-page="15"] .dish-cutout,.dish-window[data-page="33"] .dish-cutout{position:absolute;left:50%;bottom:var(--bowl-bottom,9%);width:min(var(--bowl-width,76%),calc(var(--view-width)*.9));height:86%;max-height:none;object-fit:contain;object-position:center bottom;transform:translateX(-50%);filter:drop-shadow(7px 10px 8px #37281624);pointer-events:none}
.sea-surface{position:absolute;inset:0;z-index:2;pointer-events:none;mask-image:url('assets/motion/panorama-sea-mask.png');mask-size:100% 100%;mask-repeat:no-repeat;-webkit-mask-image:url('assets/motion/panorama-sea-mask.png');-webkit-mask-size:100% 100%;-webkit-mask-repeat:no-repeat}.sea-surface img{display:block;width:100%;height:100%;object-fit:fill;filter:url('#sea-flow')}
@media(prefers-reduced-motion:reduce){.sea-surface{display:none}}
.dish-window[data-page="15"] .dish-cutout{height:98%;bottom:0;filter:none}

.dish-window[data-page="15"] .dish-cutout{object-position:center center}

/* Isolated transparent artwork enters without a rectangular backing. */
.isolated .seen>.entrance{animation-duration:1.05s}
.isolated .seen[data-effect=ink]>.entrance{animation:softInk 1.2s ease-out both;animation-delay:var(--delay,0ms)}
.isolated .seen[data-effect=from-left]>.entrance{animation:objectLeft 1.25s var(--ease) both;animation-delay:var(--delay,0ms)}
.isolated .seen[data-effect=stamp]>.entrance{animation:objectStamp .9s var(--ease) both;animation-delay:var(--delay,0ms)}
@keyframes softInk{from{opacity:0}to{opacity:1}}
@keyframes objectLeft{from{opacity:0;transform:translateX(-28px)}to{opacity:1;transform:none}}
@keyframes objectStamp{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.photo-page.enter,.photo-page.enter.up{animation:fade .55s ease-out both}
.photo-page.leaving,.photo-page.leaving.up{animation:photoFadeOut .55s ease-out both}
@keyframes photoFadeOut{to{opacity:0}}
.dish-contact-shadow{position:absolute;left:50%;transform:translateX(-44%);pointer-events:none;z-index:0;background:radial-gradient(ellipse at 45% 52%,rgba(35,24,14,.49) 0,rgba(37,25,14,.34) 20%,rgba(38,26,14,.16) 43%,rgba(38,26,14,0) 72%);filter:blur(3px)}
.dish-cutout{z-index:1;filter:drop-shadow(2px 3px 2px #37281620)}