/* Four recurring gestures: bloom, tide, turn, wiggle. */
:root{--motion-bloom:900ms;--motion-tide:1600ms;--motion-turn:1200ms;--motion-wiggle:6000ms;--water-ease:cubic-bezier(.22,.65,.25,1)}
.tide-wash{position:fixed;inset:0;z-index:0;pointer-events:none;background:#f7f5ed}
.tide-color{position:absolute;inset:0;opacity:0;will-change:opacity}
.tide-sea{background:radial-gradient(ellipse at 12% 45%,#c9ded2,transparent 75%),radial-gradient(ellipse at 90% 80%,#dcebc7,transparent 70%)}
.tide-petal{background:radial-gradient(ellipse at 88% 55%,#efc2cf,transparent 75%),radial-gradient(ellipse at 15% 80%,#e7ceac,transparent 75%)}
.tide-sun{background:radial-gradient(ellipse at 30% 60%,#e7d5ab,transparent 85%)}
.tide-journey main,.tide-journey footer,.tide-journey .mango-note{position:relative;z-index:1}
.tide-progress{position:fixed;inset:0 0 auto;height:3px;background:#557447;z-index:50;transform:scaleX(0);transform-origin:left center;pointer-events:none}
.tide-journey .discovery{background:linear-gradient(180deg,transparent,#dcebc74d 15%,#dcebc780 50%,transparent)}
.tide-journey .linkletters{background:linear-gradient(180deg,transparent,#efe9dd66 20%,#efe9dd66 80%,transparent)}
.tide-journey .commission{background:linear-gradient(180deg,transparent,#efc2cf8c 15%,#efc2cf8c 80%,transparent)}
.tide-journey .contact{background:linear-gradient(180deg,transparent,#dce2cf99)}
.wander-cue{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:6;text-align:center;font-size:10px;letter-spacing:.08em;color:#fff9ed;text-shadow:0 1px 8px #263b3070;pointer-events:none}
.wander-cue svg{display:block;width:55px;height:22px;margin:0 auto 6px;fill:none;stroke:currentColor;stroke-width:1.3;animation:authored-wiggle var(--motion-wiggle) ease-in-out infinite}
@keyframes authored-wiggle{50%{transform:translateX(4px) rotate(3deg)}}
.origin-invitation{padding-top:16px;margin-bottom:0!important;font:italic 18px/1.65 'Playfair Display',Georgia,serif!important;color:#426b3b}
.origin-invitation a{font:12px/1.6 'DM Sans',Arial,sans-serif;border-bottom:1px solid #426b3b55;padding-bottom:4px}
.signature{opacity:var(--signature-reveal,1);transform:translateY(calc((1 - var(--signature-reveal,1))*8px));transition:opacity 150ms linear}
.letters-stack{display:grid;gap:38px;min-width:0}
.tide-journey .letter{position:relative;max-width:720px;padding:clamp(24px,3.5vw,44px);background:radial-gradient(ellipse at 0 0,#fbf4e4,transparent 70%),#f6f0e3;border:1px solid #b7a68a40;box-shadow:0 8px 24px #655a3e08;border-radius:3px 9px 4px 2px}
.letter::before{content:'';position:absolute;top:0;right:0;width:40px;height:40px;background:linear-gradient(225deg,#e9ddc8 49%,transparent 50%);border-radius:0 9px 0 0;pointer-events:none}
.letter-intro{align-self:start;position:sticky;top:135px}
.letter-inbox{margin:28px 0 0;font:italic 17px/1.5 'Playfair Display',Georgia,serif}
.letter-intro .text-link{margin-top:8px;min-height:44px;font-size:12px}
.letter-body blockquote{margin:28px 0;padding:12px 0;font:italic 25px/1.5 'Playfair Display',Georgia,serif;color:#426b3b;border-block:1px solid #b7a68a55}
.letter-body blockquote span{font:11px/1.6 'DM Sans',Arial,sans-serif}
.letter-more[open] .letter-body,.bloom-moment{animation:authored-bloom var(--motion-bloom) var(--water-ease) both}
@keyframes authored-bloom{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.commission-next{max-width:1120px;margin:0 auto;padding:0 5% 34px}
.commission-process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin:0;padding:22px 0 16px;list-style:none;border-top:1px solid #a7687733}
.commission-process li{position:relative;text-align:center}
.commission-process span{font:italic 15px 'Playfair Display',Georgia,serif;color:#78515e}
.commission-process h3{font:400 20px/1.35 'Playfair Display',Georgia,serif;margin:9px 0}
.commission .commission-process p{font-size:12px;line-height:1.6;margin:0}
.commission-intake{max-width:700px;margin:12px auto 0;border:0;padding:0;text-align:center}
.commission-intake summary{min-height:44px;padding:10px;font-size:13px;cursor:pointer;list-style:none;text-decoration:underline;text-underline-offset:5px}
.commission-intake form{padding:24px 0 0;text-align:left}
.commission-intake textarea{min-height:100px}
.commission-intake form>.pill{display:block;margin:20px auto 0}
.ribbon{position:relative}
.ribbon-pause{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:#f0a9c1;border:1px solid #263b3066;border-radius:50%;width:48px;height:48px;padding:4px;color:#263b30;font-size:9px;line-height:1.25;z-index:2}
.ribbon.ribbon-paused div{animation-play-state:paused!important}
.garden-stage .collection-controls button{width:44px;height:44px;min-width:44px}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid #975629;outline-offset:5px}
.turn-controls{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.turn-controls button{min-width:44px;min-height:44px;padding:9px 15px;border:1px solid #426b3b55;background:#f7f5ed;color:#263b30;border-radius:45% 55% 48% 52% / 55% 44% 56% 45%;font-size:12px;cursor:pointer}
.turn-controls button:hover{background:#e7edce}
.turn-status{min-height:18px;margin:9px 0 0;text-align:center;font:italic 12px/1.5 'Playfair Display',Georgia,serif;color:#426b3b}
.turn-viewport,.reflection-turn-viewport{position:relative;display:grid;place-items:center;width:100%;height:clamp(300px,57vh,620px);overflow:hidden;outline-offset:4px}
.turn-viewport{background:#efe9dd66;border-radius:3px 13px 5px 10px}
.turn-viewport.is-zoomed{cursor:grab;touch-action:none}
.turn-viewport.is-zoomed:active{cursor:grabbing}
.turn-viewport .turn-image,.discovery .reflection-turn-viewport>img{display:block;width:100%;height:100%;max-height:none;object-fit:contain;box-shadow:none;transform-origin:center center;transition:transform var(--motion-turn) var(--water-ease);will-change:transform}
.turn-viewport .turn-image,.discovery .reflection-turn-viewport>img{position:absolute;inset:0;min-width:0;min-height:0}
.turn-viewport.is-zoomed .turn-image{transition:transform 80ms linear}
.reflection-turn-viewport{height:clamp(360px,40vw,560px)}
.reflection-turn-controls{margin-top:8px}
.tide-journey #artDialog{max-width:1300px;width:96%;max-height:96svh;padding:46px 28px 28px;border-radius:4px 15px 6px 10px}
.tide-journey .dialog-grid{grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr);gap:30px}
.tide-journey .close-dialog{min-width:44px;min-height:44px;z-index:2}
.dialog-grid h2{font-size:clamp(25px,3vw,40px)}
.tide-journey .art-cart{background:#f4eddfaa}
@media(max-width:800px){.letter-intro{position:static}.tide-journey .dialog-grid{grid-template-columns:1fr;gap:20px}.turn-viewport{height:52svh}.reflection-turn-viewport{height:clamp(300px,55svh,480px)}.commission-process{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.tide-journey .letter{padding:24px}.letters-stack{gap:26px}}
@media(max-width:520px){.commission-next{padding-inline:7%}.commission-process h3{font-size:18px}.tide-journey #artDialog{padding:46px 18px 22px}.turn-controls button{padding-inline:12px}.wander-cue{bottom:22px}.letter-body blockquote{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.wander-cue{display:none}.tide-color{display:none}.letter-body,.bloom-moment,.wander-cue svg{animation:none!important}.turn-viewport .turn-image,.discovery .reflection-turn-viewport>img{transition:opacity 150ms linear;will-change:auto}.signature{transform:none;opacity:1}.ribbon div{animation:none!important}.tide-journey .scroll-title,.tide-journey .story-art{transform:none!important;transition:opacity 150ms linear}.letter-intro{position:static}}

.letter-turn{margin:22px auto 26px;text-align:center;max-width:250px}
.letter-turn>div{height:240px;display:grid;place-items:center}
.letter-turn img{width:100%;height:100%;object-fit:contain;transform:rotate(var(--letter-turn,0deg)) scale(.72);filter:drop-shadow(0 7px 8px #263b3020);will-change:transform}
.letter-turn figcaption{font:italic 14px/1.5 'Playfair Display',Georgia,serif;color:#426b3b}
@media(prefers-reduced-motion:reduce){.letter-turn img{transform:none;will-change:auto}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition-property:opacity,color,background-color!important;transition-duration:150ms!important}}

/* Readable at arrival, then a more noticeable drift with a real pause control. */
.ribbon.ribbon-started div{animation:patient-ribbon 65s linear 1.5s infinite both}
@keyframes patient-ribbon{0%,2%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.discovery .river-current{animation:none;transform:translate3d(var(--river-x,0px),var(--river-y,0px),0) rotate(var(--river-angle,0deg))}
.river-current .river-ripple{animation:none}
.discovery .section-top .reflection-guide{font-size:14px;line-height:1.6;margin:15px auto 12px;max-width:420px;letter-spacing:0}
.reflection-jump{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 24px;background:#426b3b;color:#fff9ed;border-radius:47% 53% 45% 55% / 54% 43% 57% 46%;font-size:14px;line-height:1.5}
.reflection-jump:hover{background:#34562e}
#reflection{scroll-margin-top:125px}
.reflection #shareReflection{min-height:48px;min-width:200px;font-size:14px;padding:13px 24px;background:#426b3b;color:#fff9ed}
@media(prefers-reduced-motion:reduce){.ribbon.ribbon-started div{animation:none!important}.discovery .river-current{transform:none}}

.commission-process-heading{font:400 clamp(20px,2.2vw,26px)/1.4 'Playfair Display',Georgia,serif;text-align:center;margin:0 0 14px}
.reflection .artwork-untitled{margin:0 0 8px;font:italic 26px/1.4 'Playfair Display',Georgia,serif}
.reflection .interpretation-invitation{font:400 17px/1.5 'Playfair Display',Georgia,serif;margin:0 0 16px}
.tide-journey .mango-moment{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:20px;padding:38px 7% 25px}
.mango-art{width:clamp(135px,15vw,190px);flex:0 0 auto}
.mango-art svg{display:block;width:100%;height:auto;overflow:visible}
.mango-character{transform-origin:120px 140px;animation:mango-drift 6s ease-in-out infinite}
.mango-arm{transform-box:view-box}
.mango-arm-left{transform-origin:76px 124px;animation:mango-wave 5s ease-in-out infinite}
.mango-arm-right{transform-origin:171px 112px;animation:mango-wave 5s ease-in-out -2s infinite reverse}
.tide-journey .mango-note{margin:0;padding:0;background:none;text-align:left;font:italic clamp(18px,2vw,24px)/1.65 'Playfair Display',Georgia,serif;color:#426b3b}
.mango-note p{margin:0 0 8px}
.mango-note cite{display:block;font:12px/1.5 'DM Sans',Arial,sans-serif;color:#526544}
@keyframes mango-drift{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-6px) rotate(2deg)}}
@keyframes mango-wave{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}
@media(max-width:680px){.tide-journey .mango-moment{flex-direction:column;gap:8px;padding:30px 7% 24px}.mango-art{width:145px}.tide-journey .mango-note{text-align:center;font-size:18px}.reflection .artwork-untitled{font-size:24px}}
@media(prefers-reduced-motion:reduce){.mango-character,.mango-arm{animation:none;transform:none}}

/* Each flower has its own lean; the navigation labels stay level. */
.art-navigation nav a:nth-of-type(1) .nav-flower{transform:rotate(-13deg)}
.art-navigation nav a:nth-of-type(2) .nav-flower{transform:rotate(8deg)}
.art-navigation nav a:nth-of-type(3) .nav-flower{transform:rotate(-5deg)}
.art-navigation nav a:nth-of-type(4) .nav-flower{transform:rotate(17deg)}
.art-navigation nav a:nth-of-type(5) .nav-flower{transform:rotate(-18deg)}
.art-navigation nav a:nth-of-type(6) .nav-flower{transform:rotate(4deg)}