/* Isolated experiment: official demo-v08.css is preserved byte for byte. */
.hero{height:860px}.hero-copy{position:relative;z-index:2}.hero-copy .blue-mark{background:#c4a365}
.hero-actions .button{position:relative;background:linear-gradient(115deg,#d0b479,#b48b49 45%,#cfb077 75%,#b28b4f);color:#211b10;border:1px solid #d3b880;box-shadow:inset 0 1px #f2dcac,inset 0 -3px #745329,0 8px 18px #0004;transition:transform 150ms cubic-bezier(.23,1,.32,1)}
.hero-actions .button:before{content:'';position:absolute;inset:4px;border:1px solid #71512577;pointer-events:none}.hero-actions .button:active{transform:scale(.98)}
.framed-collage{transform:none;margin:0;inset:0;width:auto;perspective:1100px;transform-origin:center}
.antique-position{position:absolute;perspective:1000px;pointer-events:auto}
.antique-frame{border:0;padding:0;background:none;color:inherit;display:block;width:100%;height:100%;transform-style:preserve-3d}
.frame-drift,.frame-art{display:block;width:100%;height:100%;position:relative}
.frame-art{filter:drop-shadow(12px 24px 15px #0007)}


.antique-1{left:39%;top:375px;width:27%;height:335px;z-index:3;transform:rotate(-7deg)}

.antique-2{left:56%;top:160px;width:26%;height:250px;z-index:1;transform:rotate(4deg)}

.antique-3{right:1%;top:282px;width:18.5%;height:340px;z-index:4;transform:rotate(8deg)}

.antique-4{left:65%;top:480px;width:26%;height:235px;z-index:5;transform:rotate(-4deg)}

.framed-collage .paper-note{left:auto;right:4%;top:716px;width:270px;height:100px;padding:22px 18px 16px;background:linear-gradient(110deg,#e6d8b8,#d9c8a3 70%,#eee0bf);color:#433723;font:30px/1.05 Caveat,cursive;transform:rotate(2deg);text-align:center;box-shadow:6px 12px 17px #0005}
.framed-collage .paper-note:before{content:'';position:absolute;inset:8px;border:1px solid #a2844977;pointer-events:none}
.gold-pin{position:absolute;top:7px;left:49%;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 30% 20%,#f3dbaa,#a87e35 65%,#61451d);box-shadow:1px 2px 3px #49351466}
.motion-control{width:auto;height:44px;padding:0 14px;border-radius:0;right:auto;left:var(--gutter);bottom:20px;font-size:12px;background:#071725;color:#e2ceaa;border-color:#a68c5d;z-index:6}
.hero-status{bottom:76px}
.antique-frame:focus-visible{outline:3px solid #e5c686;outline-offset:4px}.hero-actions .button:focus-visible{outline-color:#f4d99f}
.experiment-switch{position:fixed;left:12px;bottom:12px;z-index:30;background:#f7f3e9;color:#071e33;padding:9px 14px;box-shadow:0 4px 16px #0004;font-size:12px;display:flex;gap:14px;align-items:center}.experiment-switch span{font-size:10px;color:#5b503c}.experiment-switch a{display:flex;align-items:center;min-height:28px;text-decoration:underline;text-underline-offset:3px}
.framed-dialog{width:min(1000px,94vw);max-height:92dvh;overflow:auto;background:#f7f3e9;color:#071e33;border:1px solid #aa8b50;padding:24px}.framed-dialog::backdrop{background:#040c15ed}.framed-full-photo{display:block;width:100%;height:55vh;object-fit:contain;margin:20px 0}.framed-dialog h2{font-size:28px;line-height:1.3}.framed-description{line-height:1.6;margin-top:16px}.framed-id{font:12px/1.6 IBM,monospace;margin:18px 0;color:#564b35}.framed-dialog .text-link{color:#133f6c;text-decoration:underline;display:inline-block;padding:12px 0}.framed-close{display:block;margin-left:auto;background:none;color:inherit;border:1px solid #786240;min-height:44px;padding:0 16px}
@media(hover:hover) and (pointer:fine){.antique-frame:hover .frame-drift{animation-play-state:paused}.hero-actions .button:hover{background:linear-gradient(115deg,#dfc48c,#c09c5c 45%,#dcc18c 75%,#c19c5c)}}
@media(prefers-reduced-motion:no-preference){.frame-drift{animation:frame-suspension 10s cubic-bezier(.45,0,.55,1) infinite alternate}.antique-2 .frame-drift{animation-delay:-4s;animation-duration:12s}.antique-3 .frame-drift{animation-delay:-7s;animation-duration:11s}.antique-4 .frame-drift{animation-delay:-2s;animation-duration:13s}}
@keyframes frame-suspension{from{transform:translateY(0)}to{transform:translateY(-5px)}}
.paused .frame-drift{animation-play-state:paused}
@media(min-width:901px) and (max-width:1100px){.hero{height:900px}.antique-1{left:43%;top:440px;width:30%;height:290px}.antique-2{left:58%;top:180px;width:29%;height:230px}.antique-3{right:0;top:355px;width:22%;height:280px}.antique-4{left:68%;top:630px;width:29%;height:195px}.framed-collage .paper-note{right:35%;top:758px;width:245px;font-size:27px}}
@media(max-width:900px){.hero{height:1120px}.framed-collage{inset:550px 0 auto;height:490px;width:min(650px,100%);left:50%;transform:translateX(-50%);margin:0}.antique-1{left:2%;top:85px;width:48%;height:250px}.antique-2{left:47%;top:0;width:48%;height:200px}.antique-3{right:0;top:160px;width:35%;height:260px}.antique-4{left:22%;top:280px;width:46%;height:190px}.framed-collage .paper-note{right:30%;top:450px;width:250px;height:85px;font-size:26px;padding-top:18px}.hero-status{top:530px;bottom:auto}.motion-control{left:auto;right:6%;bottom:18px}.menu-toggle{min-height:44px;min-width:60px}.framed-dialog{padding:16px}.framed-dialog h2{font-size:24px}.framed-full-photo{height:45vh}.experiment-switch{padding:3px 10px;font-size:11px}.experiment-switch span{display:none}.experiment-switch a{min-height:38px}}
@media(max-width:540px){.hero{height:1090px}.framed-collage{top:565px;height:405px}.antique-1{left:0;top:66px;width:53%;height:205px;transform:rotate(-6deg)}.antique-2{left:47%;top:0;width:51%;height:150px}.antique-3{right:0;top:140px;width:36%;height:210px}.antique-4{left:16%;top:260px;width:51%;height:150px}.framed-collage .paper-note{top:405px;right:8%;width:230px;height:78px;font-size:25px;padding:18px 12px 10px}.motion-control{bottom:0;right:6%;height:44px}.hero-status{font-size:9px}.hero-copy .hero-actions{gap:12px}}
@media(prefers-reduced-motion:reduce){.frame-drift{animation:none!important}.hero-actions .button{transition:none}.motion-control{display:none}}


.skip-link:not(:focus){top:-100px;transform:none}
@media(max-width:540px){.hero{height:1130px}.antique-1{left:2%;width:50%}.antique-3{right:2%;width:34%}.motion-control{bottom:12px}}

/* Use each supplied PNG at its intrinsic ratio. Only uniform scale and in-plane rotation. */
.antique-position,.antique-frame,.frame-art,.frame-drift{height:auto;perspective:none;transform-style:flat}
.natural-frame{display:block;width:100%;height:auto;overflow:visible}
.antique-1{left:39%;top:325px;width:25%;transform:rotate(-7deg)}
.antique-2{left:57%;top:170px;width:27%;transform:rotate(2deg)}
.antique-3{right:0;top:250px;width:22%;transform:rotate(5deg)}
.antique-4{left:62%;top:525px;width:30%;transform:rotate(-3deg)}
@media(min-width:901px) and (max-width:1100px){.antique-1{left:45%;top:385px;width:25%}.antique-2{left:58%;top:175px;width:29%}.antique-3{right:0;top:310px;width:23%}.antique-4{left:65%;top:620px;width:33%}}
@media(max-width:900px){.hero{height:1240px}.framed-collage{height:620px}.antique-1{left:3%;top:70px;width:41%}.antique-2{left:45%;top:0;width:53%}.antique-3{right:0;top:165px;width:36%}.antique-4{left:30%;top:385px;width:57%}.framed-collage .paper-note{top:555px;right:15%}}
@media(max-width:540px){.hero{height:1140px}.antique-1{left:2%;top:50px;width:47%}.antique-2{left:45%;top:0;width:55%}.antique-3{right:0;top:135px;width:41%}.antique-4{left:18%;top:300px;width:65%}.framed-collage .paper-note{top:440px;right:8%}.framed-collage{height:540px}}

.hero{height:910px}.antique-4{top:455px}.framed-collage .paper-note{top:774px}
@media(min-width:901px) and (max-width:1100px){.antique-4{top:600px}.framed-collage .paper-note{top:780px}}
@media(max-width:900px){.hero{height:1290px}.antique-4{top:350px;width:50%}.framed-collage .paper-note{top:590px}}
@media(max-width:540px){.hero{height:1190px}.antique-4{top:300px;width:65%}.framed-collage .paper-note{top:485px}}

/* Curator sketch: five frames. antique-3 intentionally untouched at every breakpoint. */
.antique-1{left:33.5%;top:424px;width:19%;transform:rotate(0deg)}
.antique-2{left:56%;top:110px;width:24%;transform:rotate(0deg)}
.antique-4{left:31.5%;top:108px;width:21%;transform:rotate(0deg);z-index:2}
.antique-5{left:53%;top:574px;width:24%;transform:rotate(-2deg);z-index:5}
.antique-5 .frame-drift{animation-delay:-5s;animation-duration:12s}
@media(min-width:901px) and (max-width:1100px){.antique-1{left:44%;top:460px;width:24%}.antique-2{left:64%;top:130px;width:26%}.antique-4{left:44%;top:120px;width:23%}.antique-5{left:67%;top:650px;width:29%}.framed-collage .paper-note{right:34%;top:790px}}
@media(max-width:900px){.hero{height:1370px}.antique-1{left:4%;top:185px;width:39%}.antique-2{left:53%;top:0;width:46%}.antique-4{left:2%;top:5px;width:46%}.antique-5{left:31%;top:490px;width:53%}.framed-collage .paper-note{top:660px}.framed-collage{height:770px}}
@media(max-width:540px){.hero{height:1340px}.antique-1{left:2%;top:155px;width:46%}.antique-2{left:52%;top:0;width:48%}.antique-4{left:1%;top:8px;width:47%}.antique-5{left:24%;top:427px;width:66%}.framed-collage .paper-note{top:615px}.framed-collage{height:730px}}

@media(min-width:541px) and (max-width:900px){.hero{height:1440px}.framed-collage .paper-note{top:720px}}

/* Figma curator composition, 140:9; keep native frame and photo proportions. */
@media(min-width:1101px){
 .antique-position{transform-origin:0 0}
 .antique-1{left:32.638889%;top:362.755px;width:21.686077%;transform:rotate(-6.759385deg)}
 .antique-2{left:55.694444%;top:131.921px;width:29.117188%;transform:rotate(-5.60087deg)}
 .antique-3{left:79.254108%;right:auto;top:181px;width:22.013889%;transform:rotate(5deg)}
 .antique-4{left:31.103422%;top:103.883px;width:25.535278%;transform:rotate(-1.9287deg)}
 .antique-5{left:56.40447%;top:454.497px;width:27.617512%;transform:rotate(2.599943deg)}
 .hero-actions .text-link{position:absolute;top:683px;left:0}
}
.frame-art{filter:drop-shadow(5px 16px 12px #04060970) drop-shadow(1px 4px 3px #0000003d)}
@media(prefers-reduced-motion:no-preference){
 .frame-drift{animation:memory-suspension 12s cubic-bezier(.77,0,.175,1) infinite alternate}
 .antique-2 .frame-drift{animation-duration:14s;animation-delay:-3s}
 .antique-3 .frame-drift{animation-duration:16s;animation-delay:-6s}
 .antique-4 .frame-drift{animation-duration:13s;animation-delay:-2s}
 .antique-5 .frame-drift{animation-duration:15s;animation-delay:-5s}
}
@keyframes memory-suspension{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(-4px) rotate(.3deg)}}
.paused .frame-drift{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.motion-control{display:block;opacity:.8}.projected-photo{opacity:1!important}}

/* Keep comparison navigation clear of the pause control and photographs. */
.experiment-switch{position:relative;left:auto;bottom:auto;margin:12px;width:fit-content}