/* A consistent catalogue rhythm. Full artwork remains available in the piece view. */
.capsule-card .capsule-card-art{aspect-ratio:4/5}
.capsule-card>a{height:100%;display:flex;flex-direction:column}
.capsule-card-copy{display:flex;flex:1;flex-direction:column;gap:10px;padding-top:20px}
.capsule-card-copy h3{margin:0;line-height:1.12;min-height:2.24em;overflow-wrap:anywhere}
.capsule-card-copy>span{margin-top:auto;line-height:1.5;min-height:3em;align-items:start}
.piece-view{display:none}
/* The campaign carries the clothes. The second tile is a simple edition marker. */
.drop-number{grid-column:2/4;container-type:size;display:flex;justify-content:center;gap:16px;padding:24px 28px}
.drop-number h2{font-size:min(150px,27cqw,calc((100cqh - 65px)/1.2));line-height:1.1;margin:auto 0;white-space:nowrap}
.drop-number .number-rule{margin-top:0}
.drop-number .dot-line{margin-top:0}
/* Quiet room identity, with secondary actions available on demand. */
#hotel-experience .hotel-top{padding:20px 28px;background:linear-gradient(#080a0be6,transparent)}
#hotel-experience .hotel-guide{top:100px;left:28px;max-width:calc(100% - 56px);pointer-events:none}
#hotel-experience .hotel-guide h2{font:42px/1.15 Machro;margin:0;padding:.12em 0 .05em;white-space:nowrap}
#hotel-experience .hotel-guide .sr-only{margin:0;max-width:1px}
.hotel-actions{pointer-events:auto;margin-top:14px;width:210px;font:10px/1.5 monospace}
.hotel-actions summary,.hotel-movement summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:22px;min-height:44px;border-bottom:1px solid #b0a99555;color:#e8dfcc;letter-spacing:1px}
.hotel-actions summary::-webkit-details-marker,.hotel-movement summary::-webkit-details-marker{display:none}
.hotel-actions summary span,.hotel-movement summary span{font:19px Arial;transition:transform .2s}
.hotel-actions[open] summary span,.hotel-movement[open] summary span{transform:rotate(45deg)}
.hotel-actions[open]{background:#0b0d0eed;padding:0 14px 10px;border:1px solid #8f857444}
#hotel-experience .hotel-actions button{display:block;width:100%;margin:0;text-align:left;padding:14px 0;font:10px/1.5 monospace}
#hotel-experience .hotel-actions button[hidden],.hotel-actions[hidden]{display:none}
.hotel-movement{position:absolute;left:28px;bottom:26px;z-index:6;width:150px;font:10px monospace}
.hotel-movement[open]{background:#0b0d0eed;padding:0 12px 12px;border:1px solid #8f857444}
#hotel-experience .hotel-movement .walk-controls{position:static;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;opacity:1;margin-top:12px}
#hotel-experience .walk-controls button{height:36px}
#hotel-experience .walk-controls:after{content:none}
.hotel-movement p{font:8px/1.8 monospace;color:#ada899;margin:12px 0 0}
#hotel-experience .elevator{bottom:26px;width:min(540px,calc(100% - 410px));border:1px solid #9e958340}
#hotel-experience .elevator button{min-height:48px;flex-direction:row;padding:10px 9px}
#hotel-experience .elevator button span{font:9px/1.4 monospace;max-width:none;text-align:center}
#hotel-experience .elevator button[aria-current]{background:#d8cfb9;color:#0c0d0b}
#hotel-experience .reality-console{width:290px;right:28px;bottom:98px;padding:15px 18px 12px}
#hotel-experience .reality-console-head label{font:30px/1.15 Machro;padding-top:.1em}
#hotel-experience .reality-readout{font-size:27px;line-height:1.1}
#hotel-experience .reality-console-footer{border:0;margin-top:5px;padding:0;justify-content:flex-end}
#hotel-experience .reality-console-footer button{min-height:28px;padding:6px 0}
#hotel-experience #inspect-nearby{bottom:91px;font-size:10px;padding:12px 18px}
.hotel-actions summary:focus-visible,.hotel-movement summary:focus-visible{outline:2px solid #ff5900;outline-offset:3px}
@media(max-width:900px){
 #hotel-experience .elevator{width:calc(100% - 48px);bottom:20px}
 .hotel-movement{bottom:88px;left:24px;width:120px}
 #hotel-experience #inspect-nearby{left:24px;right:auto;transform:none;bottom:145px}
}
@media(max-width:760px){
 .capsule-card-copy{padding:16px 2px 0;gap:8px}
 .capsule-card-copy h3{font-size:clamp(24px,5.5vw,34px)}
 .drop-number{grid-column:2;grid-row:2;height:330px;align-self:stretch;padding:18px 15px;gap:12px}
 .drop-number h2{white-space:normal;font-size:clamp(54px,12vw,82px);line-height:1.1;margin:auto 0}
 .drop-number .number-rule,.drop-number .dot-line{position:static}
 #hotel-experience .hotel-top{padding:14px 16px}
 #hotel-experience .hotel-guide{top:78px;left:20px;max-width:calc(100% - 40px)}
 #hotel-experience .hotel-guide h2{font-size:34px}
 .hotel-actions{margin-top:7px;width:175px;font-size:9px}
 #hotel-experience .reality-console{right:16px;bottom:85px;width:min(250px,calc(100% - 32px));padding:12px 15px 8px}
 #hotel-experience .reality-console-head label{font-size:28px}
 #hotel-experience .reality-readout{font-size:24px}
 #hotel-experience .elevator{bottom:14px;width:calc(100% - 32px)}
 #hotel-experience .elevator button{min-height:52px;padding:10px 4px}
 #hotel-experience .elevator button span{font-size:8px}
 .hotel-movement{left:20px;bottom:245px;width:100px}
 #hotel-experience #inspect-nearby{left:auto;right:16px;bottom:245px!important;font-size:9px}
 .hotel-movement[open]{width:140px}
}
@media(max-width:380px){.drop-number{height:310px}.drop-number h2{font-size:52px}}
@media(max-height:560px) and (min-width:761px){
 #hotel-experience .hotel-guide{top:76px}
 #hotel-experience .hotel-guide h2{font-size:30px}
 #hotel-experience .reality-console{bottom:90px}
}

#hotel-experience .hotel-guide h2{text-shadow:0 2px 18px #000,0 1px 4px #000}
#hotel-experience .hotel-guide{background:radial-gradient(ellipse at top left,#05060770,transparent 75%)}
/* Room controls sit at the perimeter; the architecture owns the centre. */
#hotel-experience .hotel-guide{top:94px}
#hotel-experience .hotel-guide h2{font-size:34px;line-height:1.16}
.hotel-actions{width:152px;margin-top:8px;font-size:9px}
#hotel-experience .reality-console{bottom:24px;right:24px;width:272px;padding:10px 14px 7px;background:#11110fe8;color:#ece2cd;border:1px solid #a4835a66;border-top:2px solid #ff5900;clip-path:none;box-shadow:0 6px 22px #0004}
#hotel-experience .reality-console:before{display:none}
#hotel-experience .reality-console-head label{font:23px/1.1 Machro;color:#f57c3d}
#hotel-experience .reality-readout{font:16px/1 monospace;color:#e5d6bc}
#hotel-experience .reality-readout span{font-size:8px;margin-top:0}
#hotel-experience .reality-control{height:36px;margin-top:3px;margin-right:52px}
#hotel-experience .reality-control:before{inset:15px 0;background:linear-gradient(to right,#ff5900 var(--distortion-level),#4b4234 var(--distortion-level));border:0}
#hotel-experience .reality-control:after{display:none}
#hotel-experience .reality-scale{display:none}
#hotel-experience .reality-console-footer{position:absolute;right:14px;bottom:7px;margin:0}
#hotel-experience .reality-console-footer button{min-height:36px;font-size:8px;color:#bcae94}
#hotel-experience #distortion{height:36px}
#hotel-experience #distortion::-webkit-slider-thumb{width:36px;height:28px;margin-top:-10px;background-size:22px 11px;box-shadow:none}
#hotel-experience #distortion::-moz-range-thumb{width:32px;height:24px;background-size:22px 11px;box-shadow:none}
#hotel-experience .elevator{left:50%;right:auto;transform:translateX(-50%);width:min(480px,calc(100% - 640px));bottom:24px;background:#101111d9}
#hotel-experience .elevator button{min-height:44px;padding:8px 6px}
#hotel-experience #inspect-nearby{bottom:88px}
.hotel-movement{bottom:24px;width:96px}
@media(max-width:1100px){
 #hotel-experience .elevator{left:24px;transform:none;width:calc(100% - 344px)}
 .hotel-movement{bottom:88px}
}
@media(max-width:760px){
 #hotel-experience .hotel-guide{top:74px;left:20px}
 #hotel-experience .hotel-guide h2{font-size:30px}
 .hotel-actions{width:140px;margin-top:3px}
 #hotel-experience .reality-console{right:16px;bottom:80px;width:min(228px,calc(100% - 132px));padding:9px 12px 6px}
 #hotel-experience .reality-console-head label{font-size:21px}
 #hotel-experience .elevator{left:16px;bottom:14px;width:calc(100% - 32px)}
 #hotel-experience .elevator button{min-height:48px}
 .hotel-movement{bottom:88px;left:20px;width:75px}
 #hotel-experience #inspect-nearby{bottom:175px!important;right:16px;left:auto}
}
@media(max-height:560px) and (min-width:761px){
 #hotel-experience .hotel-guide{top:70px}
 #hotel-experience .hotel-guide h2{font-size:28px}
}

@media(max-width:760px){.hotel-movement[open]{bottom:174px}.hotel-movement[open]~#inspect-nearby{visibility:hidden}}

/* Registered front/back photographs in a shared studio frame. */
.capsule-card .piece-front,.capsule-card .piece-back{overflow:hidden}
.capsule-card .piece-photograph{width:100%;height:100%;display:block}
.capsule-card .capsule-card-art{background:radial-gradient(ellipse at 50% 42%,#34312d 0%,#292724 64%,#22211e 100%)}
@media(hover:hover){.capsule-card>a:hover .piece-back{transform:none}}

/* An invitation: warm light, a welcoming voice and one clear way in. */
.hotel-invitation{grid-template-columns:minmax(0,1.65fr) minmax(300px,1fr);gap:0;overflow:hidden;border-radius:20px;background:#e6dfcf}
.hotel-window{min-height:500px;border-radius:0;background:#241b14}
.hotel-window>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:48% center;filter:saturate(.9) brightness(1.08)}
.hotel-window:after{background:linear-gradient(180deg,#08060466,transparent 24%,transparent 88%,#08060433)}
.hotel-window-label{top:25px;left:28px;color:#f1e7d3}
.hotel-invitation-copy{border:0;border-radius:0;background:#e6dfcf;color:#13140f;padding:clamp(28px,3.3vw,54px);justify-content:center}
.hotel-invitation-copy h2{font-size:clamp(72px,6.8vw,116px);line-height:1.08;margin:0 0 22px;letter-spacing:0}
.hotel-invitation-copy>p:not(.hotel-load-status){color:#555143;font:15px/1.6 Arial;margin:0 0 44px;max-width:230px}
.hotel-entry{margin-top:0;background:#ff5800;color:#11120e;border-color:#ff5800;min-height:62px;border-radius:5px;padding:16px 19px;transition:background .2s,transform .2s}
.hotel-entry:hover{background:#ee4d00;border-color:#ee4d00;transform:translateY(-2px)}
.hotel-entry:focus-visible{outline:2px solid #13140f;outline-offset:5px}
.hotel-load-status{color:#696453;font-size:8px;letter-spacing:.8px;margin-top:12px}
@media(max-width:900px){.hotel-invitation{grid-template-columns:1.25fr 1fr}.hotel-invitation-copy{padding:30px}.hotel-invitation-copy h2{font-size:78px}.hotel-window{min-height:470px}}
@media(max-width:760px){.hotel-invitation{grid-template-columns:1fr}.hotel-window{min-height:0;aspect-ratio:1.3}.hotel-window>img{object-position:48% center}.hotel-invitation-copy{padding:30px 28px 26px}.hotel-invitation-copy h2{font-size:clamp(70px,19vw,98px);margin-bottom:16px}.hotel-invitation-copy>p:not(.hotel-load-status){margin-bottom:25px;max-width:none;font-size:14px}.hotel-window-label{top:20px;left:22px;font-size:8px}.hotel-entry{min-height:58px}}
@media(prefers-reduced-motion:reduce){.hotel-entry{transition:none}.hotel-entry:hover{transform:none}}

.capsule-card .piece-front,.capsule-card .piece-back{transition:opacity .2s ease;transform:none}

/* Front and back occupy the same stage; changing sides never resizes the dialog. */
#piece-dialog,#piece-dialog[data-view="0"],#piece-dialog[data-view="1"]{width:min(1000px,94vw);overflow-anchor:none}
#piece-art,#piece-art[data-view="0"],#piece-art[data-view="1"]{height:min(560px,63dvh);aspect-ratio:auto;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 42%,#34312d,#292724 64%,#22211e)}
#piece-art>.piece-photograph{height:100%;width:auto;max-width:100%;flex-shrink:1}
.paired-photographs{display:flex;width:100%;height:100%;justify-content:center;align-items:center}
#piece-art .paired-photographs>.piece-photograph{width:50%;height:100%;max-width:448px}
@media(max-width:760px){#piece-dialog,#piece-dialog[data-view="0"],#piece-dialog[data-view="1"]{width:96vw}#piece-art,#piece-art[data-view="0"],#piece-art[data-view="1"]{height:440px;max-height:62dvh}}
@media(prefers-reduced-motion:reduce){.capsule-card .piece-front,.capsule-card .piece-back{transition:none}}

/* The complete campaign artwork, with controls outside its image area. */
.lookbook-panorama{aspect-ratio:auto}
.lookbook-panorama>img{width:100%;height:auto;margin:0;object-fit:contain}
.look-hotspots{position:relative;inset:auto;background:#141510;padding:14px 12px;gap:8px}
.look-hotspots button{margin:0;min-height:52px}

/* One fixed viewing stage for every angle; the clothes rotate, the layout does not. */
#garment-inspector{overflow-anchor:none;background:#171813}
#garment-inspector .inspect-art{min-height:0;aspect-ratio:auto;background:radial-gradient(ellipse at 50% 40%,#34332e,#22241f 65%,#121510)}
#inspect-image{width:100%;height:min(560px,64dvh);position:relative;cursor:grab;touch-action:pan-y}
#inspect-image.is-turning{cursor:grabbing}
#inspect-image canvas{width:100%;height:100%;display:block}
#garment-inspector #inspect-image>svg{padding:0;width:100%;height:100%;max-height:none;min-height:0}
#inspect-turn{display:flex;width:100%;align-items:center;justify-content:center;gap:7px;min-height:58px;padding:8px 22px;border-top:1px solid #686b593b;color:var(--bone)}
#inspect-turn>span{font:8px monospace;letter-spacing:1px;margin-right:auto;color:#b0b4a5}
#inspect-turn button{background:none;color:var(--bone);border:1px solid #666a58;border-radius:4px;font:9px monospace;letter-spacing:.6px;padding:12px 19px}
#inspect-turn button[aria-pressed=true]{background:var(--bone);border-color:var(--bone);color:var(--ink)}
#garment-inspector .inspect-copy{background:var(--bone)}
@media(max-width:760px){#inspect-image{height:440px;max-height:61dvh}.lookbook-panorama{min-width:0}.look-hotspots{grid-template-columns:repeat(3,minmax(0,1fr));padding:10px;gap:7px}.look-hotspots button{padding:10px 7px;gap:5px}.look-hotspots button b{font-size:7px}.look-hotspots button i{font-size:14px}#inspect-turn{padding:8px 17px}}
