
.huvys-hero {
 --hero-night: #15130f;
 --hero-gold: #edcf9c;
 --hero-gutter: clamp(15px, 4.2vw, 85px);
 --hero-top-shade: 130px;
 --hero-bottom-shade: 120px;
 position: relative;
 isolation: isolate;
 display: grid;
 grid-template-rows: minmax(180px, 1fr) auto;
 block-size: clamp(620px, calc(100svh - 201px), 1230px);
 inline-size: 100%;
 overflow: clip;
 background: var(--hero-night);
 color: #fff4e5;
}
.hero-gallery {
 position: absolute;
 inset: 0;
 z-index: 0;
 direction: ltr;
 touch-action: pan-y pinch-zoom;
}
.hero-room {
 position: absolute;
 inset: 0;
 display: none;
 margin: 0;
 background: radial-gradient(ellipse at 50% 46%, #55412d 0%, #2e241a 42%, var(--hero-night) 78%);
}
.hero-room:is([data-active], [data-outgoing]) { display: block; }
.hero-room[data-active] { z-index: 1; }
.hero-room[data-outgoing] { pointer-events: none; }
.hero-camera {
 position: absolute;
 top: 0;
 left: 0;
 inline-size: var(--shot-size, min(100%, 78svh));
 aspect-ratio: 1;
 transform-origin: 0 0;
 transform: var(--shot-rest, translate3d(calc(50vw - 50%), 10%, 0));
 
 mask-image: linear-gradient(90deg, transparent 0, #000 var(--photo-feather), #000 calc(100% - var(--photo-feather)), transparent 100%),
             linear-gradient(180deg, transparent 0, #000 var(--photo-feather), #000 calc(100% - var(--photo-feather)), transparent 100%);
 mask-composite: intersect;
}
.hero-room-photo { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-room-view {
 position: absolute;
 left: var(--frame-x);
 top: var(--frame-y);
 width: var(--frame-w);
 height: var(--frame-h);
}
.hero-gallery::before, .hero-gallery::after {
 content: '';
 position: absolute;
 z-index: 2;
 inset-inline: 0;
 pointer-events: none;
}
.hero-gallery::before {
 top: 0;
 height: var(--hero-top-shade);
 background: linear-gradient(180deg, #15130fe8, #15130fa8 38%, #15130f68 75%, transparent);
}
.hero-gallery::after {
 bottom: 0;
 height: var(--hero-bottom-shade);
 background: linear-gradient(0deg, #15130f 0%, #15130fe8 53%, #15130f9c 78%, transparent);
}
.hero-identity {
 grid-area: identity;
 position: relative;
 z-index: 1;
 justify-self: center;
 padding-block: 0;
 margin-block-end: 20px;
 pointer-events: none;
}
.hero-identity h1 {
 position: relative;
 margin: 0;
 line-height: 1;
 width: min(clamp(180px, 17vw, 300px), 36svh);
}
.hero-wordmark {
 display: block;
 width: 100%;
 height: auto;
 filter: drop-shadow(0 2px 14px #160e0770);
}
.hero-gold-sheen {
 position: absolute;
 inset: 0;
 opacity: 0;
 background: linear-gradient(110deg, transparent 36%, #fff0c12b 44%, #fff5d3 50%, #f7bc5a55 54%, transparent 62%) 100% 0 / 260% 100%;
 mask: var(--wordmark) center / contain no-repeat;
 pointer-events: none;
}
.hero-frame-window {
 grid-row: 1;
 margin-block-start: 24px;
 margin-inline: var(--hero-gutter);
 pointer-events: none;
}
.hero-guide {
 grid-row: 2;
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
 grid-template-areas: 'caption identity actions';
 align-items: center;
 gap: clamp(14px, 2.8vw, 52px);
 padding: 25px var(--hero-gutter) clamp(16px, 3svh, 30px);
}
.hero-curation { grid-area: caption; display: grid; }
.hero-curation p { grid-area: 1 / 1; margin: 0; }

.hero-curation p[hidden] { display: block; visibility: hidden; }
.hero-caption-artist {
 display: block;
 margin-block-end: 3px;
 font-size: 11px;
 letter-spacing: .1em;
 color: var(--hero-gold);
}
.hero-curation a {
 display: inline-block;
 color: inherit;
 font-size: clamp(16px, 1.45vw, 24px);
 line-height: 1.22;
 text-wrap: pretty;
}
.hero-curation a:hover { text-decoration: underline; text-underline-offset: 4px; }
.hero-room-selectors {
 grid-area: scenes;
 display: flex;
 justify-content: center;
 gap: clamp(4px, .68vw, 12px);
}
.hero-room-selectors button {
 position: relative;
 flex: none;
 display: grid;
 place-items: center;
 width: clamp(44px, 4.05vw, 65px);
 aspect-ratio: 1;
 padding: 2px;
 border: 1px solid #f3d5a343;
 background: var(--hero-night);
 transition: border-color .25s, opacity .25s;
 opacity: .79;
}
.hero-room-selectors button:hover, .hero-room-selectors button[aria-pressed=true] {
 border-color: var(--hero-gold);
 opacity: 1;
}
.hero-room-selectors button[aria-pressed=true]::after {
 content: '';
 position: absolute;
 inset-inline: 0;
 inset-block-end: -7px;
 height: 1px;
 background: var(--hero-gold);
}
.hero-room-selectors img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-actions {
 grid-area: actions;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: clamp(7px, 1.5vw, 22px);
}
.hero-actions .hero-enter {
 min-height: 44px;
 display: inline-flex;
 align-items: center;
 margin: 0;
 padding: 0;
 border: 0;
 color: var(--hero-gold);
 font-size: 13px;
 white-space: nowrap;
 text-decoration: underline;
 text-decoration-color: #edcf9c82;
 text-underline-offset: 5px;
}
.hero-actions .hero-enter:hover { color: #fff0ce; text-decoration-color: currentColor; }
.hero-motion-controls { display: flex; align-items: center; }
.hero-motion-controls button {
 display: grid;
 place-items: center;
 flex: none;
 inline-size: 44px;
 block-size: 44px;
 border-radius: 50%;
 padding: 0;
 color: var(--hero-gold);
}
.hero-motion-controls button:hover:not(:disabled) { background: #edcf9c15; }
.hero-motion-controls button:disabled { opacity: .4; }
.huvys-hero :is(a,button):focus-visible { outline: 2px solid #fff0c8; outline-offset: 3px; }

@media (max-width: 900px) {
 .hero-guide { gap: 14px; }
 .hero-actions { gap: 6px; }
}
@media (max-width: 740px) {
 .huvys-hero { block-size: clamp(560px, calc(100svh - 225px), 940px); }
 .hero-identity { padding-block: 0; margin-block-end: 12px; }
 .hero-identity h1 { width: min(clamp(156px, 46vw, 224px), 36svh); }
 .hero-guide {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: 'identity' 'caption' 'actions';
  text-align: center;
  gap: 9px;
  padding-block: 13px 7px;
 }
 .hero-caption-artist { margin-block-end: 2px; }
 .hero-curation a { font-size: clamp(16px, 4.5vw, 20px); }
 .hero-room-selectors { gap: 4px; }
 .hero-room-selectors button { width: clamp(44px, 11.7vw, 56px); }
 .hero-actions { justify-content: space-between; padding-block-start: 2px; }
}
@media (min-width: 741px) and (max-height: 540px) {
 .huvys-hero { block-size: 393px; }
 .hero-identity { padding-block: 0; margin-block-end: 10px; }
 .hero-identity h1 { width: min(162px, 39svh); }
 .hero-guide { padding-block: 16px 12px; }
}



.gallery-salon{overflow:hidden;padding-top:var(--gap-l);scroll-margin-top:110px}
.salon-heading{display:flex;align-items:end;justify-content:space-between;gap:48px;margin-inline:auto;max-width:1320px}
.salon-heading h2{font-weight:400;font-size:clamp(36px,4vw,62px);letter-spacing:-.035em;margin-top:20px}
.salon-heading>p{max-width:350px;color:var(--muted);font-size:15px;line-height:1.9}
.salon-stage{position:relative;aspect-ratio:2.1;max-height:760px;margin-top:54px;direction:ltr;isolation:isolate}
.salon-horizon{position:absolute;inset:20% 0 0;background:radial-gradient(ellipse at 50% 90%,rgb(204 184 142 / .09),transparent 65%);border-bottom:1px solid var(--line)}
.salon-piece{position:absolute;left:50%;top:0;width:43%;margin:0;transition:transform 950ms cubic-bezier(.22,.8,.2,1),opacity .8s ease,filter .8s ease;will-change:transform}
.salon-piece a{display:block;border-radius:var(--radius-image);overflow:hidden;box-shadow:0 20px 50px rgb(0 0 0 / .2)}
.salon-piece img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.salon-piece[data-position="0"]{transform:translateX(-50%);z-index:3;opacity:1}
.salon-piece[data-position="-1"]{transform:translateX(-133%) translateY(8%) scale(.79);z-index:1;opacity:.55;filter:saturate(.7)}
.salon-piece[data-position="1"]{transform:translateX(33%) translateY(8%) scale(.79);z-index:1;opacity:.55;filter:saturate(.7)}
.salon-piece:not([data-position="0"]):hover{opacity:.9;filter:saturate(1)}
.salon-footer{display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:center;gap:30px;margin-top:30px}
.salon-caption{text-align:center;min-height:75px}.salon-caption>div>span{font-size:11px;color:var(--huvys-gold)}
.salon-caption h3{font-size:clamp(21px,2.1vw,32px);font-weight:400;line-height:1.4;margin-top:8px}.salon-caption h3 span{font-size:17px;margin-inline-start:12px;color:var(--muted)}
.salon-navigation{display:flex;align-items:center;gap:15px}.salon-navigation button{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:21px}.salon-navigation button:hover{background:var(--surface-muted)}
.salon-counter{font:11px Manrope,sans-serif;color:var(--muted);letter-spacing:.1em}.salon-counter b{font-size:16px;font-weight:400;color:var(--ink)}
.salon-footer>.text-link{justify-self:end;font-size:13px}
.salon-tabs{display:flex;justify-content:center;gap:38px;margin-top:30px}
.salon-tabs button{display:flex;gap:10px;align-items:center;min-height:48px;max-width:33%;font-size:12px;color:var(--muted);border-bottom:1px solid transparent;padding:12px 0}
.salon-tabs button>span{font:9px Manrope,sans-serif;opacity:.6}
.salon-tabs button[aria-pressed=true]{color:var(--ink);border-color:var(--huvys-gold)}
@media(max-width:1099px){.salon-stage{aspect-ratio:1.85}.salon-piece{width:48%}.salon-tabs{gap:22px}}
@media(max-width:699px){.salon-heading{display:block}.salon-heading h2{font-size:38px}.salon-heading>p{font-size:14px;margin-top:20px;max-width:330px}.salon-heading .eyebrow{font-size:10px}.salon-stage{aspect-ratio:1.16;margin-top:30px;overflow:visible}.salon-piece{width:78%}.salon-piece[data-position="-1"]{transform:translateX(-136%) translateY(10%) scale(.8);opacity:.3}.salon-piece[data-position="1"]{transform:translateX(36%) translateY(10%) scale(.8);opacity:.3}.salon-footer{grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}.salon-caption{grid-column:1/-1;grid-row:1;min-height:70px}.salon-navigation{gap:10px}.salon-caption h3{font-size:25px}.salon-footer>.text-link{font-size:12px;gap:12px}.salon-tabs{gap:15px;justify-content:space-between;margin-top:16px}.salon-tabs button{font-size:10px;line-height:1.7;align-items:start;gap:6px;max-width:31%}.salon-tabs button>span{padding-top:2px}.gallery-salon{padding-top:0}}
