/* A woven roller blind sits in front of the photograph; the room stays whole. */
.wd-photo { isolation:isolate; }
.wd-window { position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.wd-cloth { position:absolute; inset:0 0 auto; height:76%; background:#758251; box-shadow:0 12px 22px #1e291a32; will-change:transform; }
.wd-weave { position:absolute; inset:0; background:repeating-linear-gradient(90deg,#faf1cf0c 0 1px,transparent 1px 5px),repeating-linear-gradient(0deg,#27321c0b 0 1px,transparent 1px 4px),linear-gradient(90deg,#3541201c,transparent 32%,#e4deab11 67%,#35412012); }
.wd-cloth:after { content:''; position:absolute; inset:8px 16px 0; border-inline:1px dashed #eee9c754; }
.wd-hem { position:absolute; bottom:-15px; left:0; width:100%; height:32px; overflow:visible; }
.wd-hem-fill { fill:#758251; }
.wd-hem-stitch { fill:none; stroke:#f1ecd1a6; stroke-width:1; stroke-dasharray:3 5; vector-effect:non-scaling-stroke; }
.wd-moon { position:absolute; width:clamp(74px,9vw,132px); height:auto; right:22%; top:40%; transform:rotate(-9deg); fill:#ece7c7; opacity:.78; }
.wd-moon-stitch { fill:none; stroke:#ece7c7; stroke-width:1.1; }
.wd-roller { position:absolute; top:-4px; left:0; right:0; height:14px; border-radius:0 0 6px 6px; background:linear-gradient(#d3c8a4,#f0e6c5 38%,#c2b793); box-shadow:0 3px 5px #1c291b24; }
.wd-dusk { position:absolute; inset:0; background:linear-gradient(160deg,#30453075,#17322b55); opacity:0; }
.wd-cord { position:absolute; top:10px; right:5%; z-index:5; width:48px; height:112px; padding:0; border:0; background:none; color:var(--cream); touch-action:none; cursor:var(--sd-control-cursor,pointer); border-radius:24px; }
.wd-cord svg { display:block; width:48px; height:108px; overflow:visible; filter:drop-shadow(0 2px 2px #1c291b44); pointer-events:none; }
.wd-cord-line { fill:none; stroke:#f6efd7; stroke-width:1.7; stroke-dasharray:2 2; }
.wd-weight { transform-origin:24px 73px; }
.wd-weight-body { fill:#f5ead0; stroke:#384328; stroke-width:1.2; }
.wd-weight-groove { fill:none; stroke:#6a774d; stroke-width:1; }
.wd-cord:hover .wd-weight-body,.wd-cord:focus-visible .wd-weight-body { fill:var(--orange); }
.wd-cord:focus-visible { outline:2px solid var(--cream); outline-offset:4px; background:#11283b1a; }
.wd-note { z-index:6; display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 5px; border:0; background:none; cursor:var(--sd-control-cursor,pointer); }
.wd-note span { border-bottom:1px dashed #f8f1df99; padding-bottom:2px; }
.wd-note svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.15; transform:rotate(-8deg); }
.wd-note:focus-visible { outline:2px solid var(--cream); outline-offset:5px; border-radius:4px; }
.wd-note[aria-pressed=true] svg { fill:#f8f1df55; }
@media(max-width:680px) {
  .wd-cloth { height:55%; }
  .wd-moon { width:76px; right:32%; top:22%; }
  .wd-cord { right:6%; top:7px; height:96px; }
  .wd-cord svg { transform:scale(.85); transform-origin:top center; }
  .wd-note { gap:7px; padding:0; }
  .wd-note svg { width:17px; height:17px; }
}
@media(forced-colors:active) {
  .wd-cloth,.wd-hem-fill { background:Canvas; fill:Canvas; }
  .wd-cloth,.wd-cord { border:1px solid CanvasText; }
  .wd-weave,.wd-dusk { display:none; }
  .wd-moon { fill:CanvasText; }
  .wd-hem-stitch,.wd-cord-line,.wd-weight-groove { stroke:CanvasText; }
  .wd-weight-body { fill:ButtonFace; stroke:ButtonText; }
  .wd-note { color:ButtonText; text-shadow:none; }
  .wd-note span { border-color:ButtonText; }
}