/* Warm bamboo material, fine cord ladders and an original seated character. */
:root{--paper:#f0e7d7;--ink:#63584b;--muted:#8c7f6a;--line:#d9cbb2}
body{background:radial-gradient(ellipse at 20% 12%,#fff8e9ad,transparent 60%),linear-gradient(115deg,transparent 65%,#a68b5d0c 65% 70%,transparent 70%)}
.brand-mark{color:#947349;border-color:#b49c78}.brand-sub,.edition,.eyebrow{color:#8d7c63}.icon-button{border-color:#c9b99d;background:#fff9ed40}.icon-button:hover{background:#fff6e3}.above-window .location-control>svg{stroke:#998061}.locate-button{border-color:#cbbca3}.location-control select{color:#78674f}
.frame{background:linear-gradient(90deg,#765332,#a17b4e 15%,#c19c6a 50%,#87623b);border-color:#785637;box-shadow:inset 1px 2px 2px #e4c393,inset -2px -2px 3px #56391c88,0 10px 35px #76572b22}
.window-view{border-color:#785b3a;background:#bbad8d}.frame-top{background:linear-gradient(#b18a59,#d5b07b 20%,#b18a58 70%,#77512b);box-shadow:0 4px 7px #402b1944}.frame-left{background:linear-gradient(90deg,#86613c,#c9a16b 42%,#a17d4d 75%,#755030);border-color:#6f4e2f}.frame-right{background:linear-gradient(90deg,#89613a,#bf9863 65%,#88613b);border-color:#775332}.sill{background:linear-gradient(#d9b783,#ba915a 42%,#8d6439 48%,#b78c55 67%,#a37a48);box-shadow:0 2px 2px #77512d66}.sill-shadow{background:linear-gradient(#82603a33,transparent)}
.louvres{perspective:1800px}.louvre{flex:1 1 0;min-height:0;margin-bottom:0;backdrop-filter:none;border-top:1px solid #f0c9887d;border-bottom:1px solid #59330fc9;background-color:#ba843e;background-image:linear-gradient(180deg,#fff3bf36,transparent 28% 68%,#63350f66),url('assets/bamboo-grain.webp');background-size:100% 100%,1100px 740px;background-position:0 0,0 var(--grain-position,0px);box-shadow:inset 0 1px 0 #ebc18a3d,0 1px 2px #45271066;transition:transform 1.15s var(--ease),box-shadow 1.15s,border-color 1.15s;transform:rotateX(0deg)}
.louvre::after{background:repeating-linear-gradient(0deg,transparent 0 3px,#ffe3a90c 3px 4px,transparent 4px 7px);opacity:.75}.louvre:nth-child(3n){filter:brightness(.97)}.louvre:nth-child(5n){filter:brightness(1.04)}.is-open .louvre{transform:rotateX(-86deg);background-color:#ba843e;background-image:linear-gradient(180deg,#fff3bf36,transparent 28% 68%,#63350f66),url('assets/bamboo-grain.webp');border-bottom-color:#6b482878;backdrop-filter:none;box-shadow:0 2px 2px #3d321e33}.glass-glint{display:none}
.blind-cords{position:absolute;inset:0;pointer-events:none;z-index:4;transition:opacity .65s .15s;opacity:.9;filter:drop-shadow(1px 0 1px #4f331f44)}.blind-cords span{position:absolute;top:0;bottom:0;width:3px;left:13.5%;background:repeating-linear-gradient(0deg,#e0c698 0 5px,#b49769 5px 8px);border-left:1px solid #f2dfb04d;border-right:1px solid #8a683c66}.blind-cords span+span{left:auto;right:13.5%}.is-open .blind-cords{opacity:.3}
.cord-control{position:absolute;right:6px;top:0;width:10px;height:62%;transform-origin:top center;transition:height .9s .12s var(--ease)}.pull-cord{position:absolute;left:4px;top:0;bottom:18px;width:2px;background:repeating-linear-gradient(0deg,#e2cc99 0 4px,#9c7a4f 4px 6px);box-shadow:1px 0 1px #432d1866}.cord-toggle{position:absolute;bottom:0;left:0;width:10px;height:22px;background:linear-gradient(90deg,#72512c,#d0a36d 40%,#976d3c);border:1px solid #78512a;border-radius:3px 3px 5px 5px;box-shadow:1px 1px 2px #5f3e2b55}.is-open .cord-control{height:56%}
.closed-intro{color:#fff4de;text-shadow:0 2px 12px #573a1670}.intro-overline{color:#f6e5c4}.intro-rule{background:#f9e7c39c}.gesture-hint{color:#fff4d9;text-shadow:0 1px 5px #573716aa}
.window-girl{position:absolute;right:1%;bottom:-6%;height:94%;width:43%;object-fit:contain;object-position:right bottom;pointer-events:none;z-index:5;opacity:0;transform:translate(22px,8px);filter:drop-shadow(-7px 6px 8px #2637352e);transition:opacity .8s var(--ease),transform 1s var(--ease)}.is-open .window-girl{opacity:1;transform:translate(0,0);transition-delay:.5s,.4s}.outside-caption{z-index:6;max-width:58%;pointer-events:none}.band-detail{display:inline-block;max-width:100%;line-height:1.6}
.reading+.reading{border-color:#d4c7af}.metric-label>span:not(.subscript),.metric-foot,.data-status,.location-status{color:#8a7d67}.closed-note{color:#9a8768}.small-star{color:#a18b65}.close-window{border-color:#c0aa84}.credits,footer{color:#998b73}.music-status{font-size:8px;color:#947c5d;letter-spacing:.3px;max-width:100px}.music-status:empty{display:none}
@media(max-width:700px){.louvre{border-bottom-width:1px}.window-girl{right:-5%;bottom:-5%;height:72%;width:65%}.outside-caption{max-width:70%;top:9%}.outside-caption h1{font-size:44px}.outside-caption .band-detail{max-width:90%;font-size:8px}.blind-cords span{width:2px;left:12%}.blind-cords span+span{left:auto;right:12%}.cord-control{right:4px}.music-status{font-size:7px;max-width:60px}}
@media(max-width:380px){.music-status{position:absolute;top:60px;right:7vw;max-width:120px}.window-girl{width:68%;height:69%}}
@media(prefers-reduced-motion:reduce){.window-girl{transform:none}.is-open .window-girl{transition-delay:0s}}
/* Keep all text and the seated figure outside the clipped 3D blind surface.
   Flatten the frame into its own stacking context, including on mobile WebKit. */
.frame{isolation:isolate;z-index:0}
.window-host>.outside-caption{z-index:10;top:9%;left:5.5%;max-width:58%;padding:12px 16px 14px;background:none;isolation:isolate;transform:translateY(12px);text-shadow:0 1px 5px #17332bb3}
.window-host>.outside-caption::before{content:'';position:absolute;inset:-4px -20px -8px -5px;z-index:-1;pointer-events:none;background:linear-gradient(100deg,#173b39c4 0%,#21483fb0 42%,#315b4a59 73%,#315b4a00 100%);border-radius:20px;filter:blur(11px)}
.window-host.is-open>.outside-caption{transform:translateY(0)}
.window-host>.closed-intro,.window-host>.gesture-hint{z-index:10;pointer-events:none}
.window-host>.window-girl{z-index:20;right:-5%;bottom:-16px;height:91%;width:42%;max-width:none;object-position:right bottom;filter:drop-shadow(-7px 5px 6px #29362b40);-webkit-mask-image:linear-gradient(#000 0 97%,transparent);mask-image:linear-gradient(#000 0 97%,transparent)}
.metric-value{color:var(--reading-color,#456b60);transition:color .25s;margin-bottom:2px}
.metric-band{font-size:8px;line-height:1.4;letter-spacing:.1px;min-height:12px;margin:0 3px 4px;font-weight:500}
.dialog-links{flex-wrap:wrap}
.below-window{min-height:198px}
@media(max-width:700px){.window-host>.outside-caption{top:8%;left:6%;max-width:70%;padding:10px 12px}.window-host>.outside-caption h1{font-size:42px}.window-host>.outside-caption .band-detail{font-size:8px}.window-host>.window-girl{right:-5.5%;bottom:-14px;height:73%;width:62%}.metric-band{font-size:7px;min-height:11px;margin-bottom:4px}.below-window{min-height:187px}}
@media(max-width:380px){.window-host>.window-girl{right:-6%;width:65%;height:71%}.window-host>.outside-caption{max-width:78%;left:5%;padding:9px 10px}.window-host>.outside-caption h1{font-size:39px}}
@media(prefers-reduced-motion:reduce){.window-host>.outside-caption,.window-host>.window-girl{transform:none}}
@media(max-width:700px){.window-host>.outside-caption::before{inset:-2px -14px -6px 7px;filter:blur(8px)}}
/* Pointer motion drives the slat angle directly; release animates from that angle.
   The entire frame owns touch gestures, including hybrid laptop touchscreens. */
.window-host{touch-action:none;user-select:none;-webkit-user-select:none;overscroll-behavior:contain}
.window-host .louvre,.window-host.is-open .louvre{transform:rotateX(var(--blind-angle,0deg));transition:none}
.window-host .blind-cords,.window-host.is-open .blind-cords{opacity:calc(.9 - var(--blind-progress,0)*.6);transition:none}
.window-host .cord-control,.window-host.is-open .cord-control{height:var(--cord-length,62%);transition:none}
.window-host>.closed-intro,.window-host>.gesture-hint{opacity:calc(1 - var(--blind-progress,0));transition:transform .6s var(--ease)}
.window-host>.outside-caption{opacity:clamp(0,calc(var(--blind-progress,0)*1.3333 - .3333),1);transition:transform .6s var(--ease)}
.window-host.is-dragging .window-toggle{cursor:grabbing}
.closed-note{font-style:italic}
/* A quiet, shared reveal: the figures arrive after the slats begin moving.
   Closing fades immediately, and the wondering line waits until they clear. */
.readings{opacity:0;transform:translateY(8px);transition:opacity 1.8s ease-in-out,transform 1.8s var(--ease);transition-delay:0s}
.is-open-page .readings{opacity:1;transform:translateY(0);transition-delay:.2s}
.window-host>.window-girl{opacity:0;transform:translate(12px,6px);transition:opacity 1.8s ease-in-out,transform 1.8s var(--ease);transition-delay:0s}
.window-host.is-open>.window-girl{opacity:1;transform:translate(0,0);transition-delay:.25s}
.closed-note{opacity:1;transition:opacity .6s ease-in-out;transition-delay:1.55s}
.is-open-page .closed-note{opacity:0;transition-duration:.25s;transition-delay:0s}
@media(prefers-reduced-motion:reduce){.readings,.is-open-page .readings,.window-host>.window-girl,.window-host.is-open>.window-girl{transform:none;transition-duration:.01ms!important;transition-delay:0s!important}.closed-note{transition-delay:0s!important}}
/* One thought in the middle of the closed window; directions sit below the sill. */
.window-host>.closed-intro{top:50%;left:8%;right:8%;transform:translateY(-50%)}
.window-host.is-open>.closed-intro{transform:translateY(calc(-50% - 12px))}
.window-host>.closed-intro p{font:clamp(25px,3.7vw,52px)/1.16 var(--serif);letter-spacing:-.4px;margin:0 auto;max-width:720px}
.opening-instruction{flex-direction:column;gap:7px;pointer-events:none;font:10px/1.5 var(--sans);font-style:normal;letter-spacing:.7px;color:#897558}
.opening-instruction .instruction-alternative{font-size:8px;letter-spacing:.4px;opacity:.8}
@media(max-width:700px){.opening-instruction{font-size:9px;gap:5px}.opening-instruction .instruction-alternative{font-size:7px}}
@media(prefers-reduced-motion:reduce){.window-host>.closed-intro,.window-host.is-open>.closed-intro{transform:translateY(-50%)}}
/* Keep small supporting copy readable against the cream paper. */
:root{--supporting-ink:#71634f}
.brand-sub,.edition,.eyebrow,.metric-label>span:not(.subscript),.metric-foot,.data-status,.location-status,.credits,.music-status,.opening-instruction,.close-window{color:var(--supporting-ink)}
.opening-instruction .instruction-alternative{opacity:1}
.locate-button{min-width:28px;min-height:28px}
.refresh-button{min-width:24px;min-height:24px}