/* Image-led gallery. No WebGL, camera zoom, foreground masks or idle motion. */
:root{--ink:#f8f1e6;--muted:#ded2c1;--gold:#d7bd91;--bg:#191713}
.scene .view{transform:none;object-position:50% 76%;opacity:0}.scene #view0{opacity:1}
.scene{inset:0}.shade{background:linear-gradient(90deg,#15130ff0 0%,#15130fa3 24%,#15130f20 49%,transparent 68%),linear-gradient(0deg,#15130fdf,transparent 28%,transparent 82%,#15130f44)}
#walk-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 76%;opacity:0;z-index:3;pointer-events:none}.shade{z-index:4;pointer-events:none}
.header-actions #motion[hidden]{display:none}
.walking .copy,.walking .copy[data-position]{opacity:0;pointer-events:none}.copy{transition:opacity .2s}
#skip-walk{position:fixed;right:4.4%;top:110px;z-index:10;display:flex;align-items:center;gap:16px;color:var(--ink);font-size:12px;padding:12px 16px;border:1px solid #e0c79e60;background:#1d191bcc;min-height:44px}#skip-walk[hidden]{display:none}#skip-walk svg{width:18px;height:18px}
.copy,.copy[data-position=preto],.copy[data-position=dourado],.copy[data-position=granito]{left:7.3%;right:auto;top:35%;bottom:auto;max-width:380px;opacity:1}
.copy h1,.copy[data-position] h1{font-size:clamp(62px,6.2vw,94px);line-height:1.02;letter-spacing:-.025em;text-shadow:none;text-wrap:balance}
.copy p{font-size:14px;max-width:29ch;line-height:1.8;margin-top:20px;color:var(--muted)}
.copy #view-hair{margin-top:30px;background:#f1e5d2;color:#2e261b;border:0;display:flex;align-items:center;justify-content:space-between;min-width:190px;gap:28px;padding:15px 22px;min-height:50px;font-size:13px}
.copy #view-hair[hidden]{display:none}.copy #view-hair:hover{background:#fff6e5}
.copy #scroll-guide{font-size:12px;line-height:1.5;margin-top:24px;color:var(--muted);letter-spacing:0}
.journey-nav{bottom:max(24px,env(safe-area-inset-bottom));gap:28px;left:4.4%;right:4.4%;align-items:center}
#back{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 8px;font-size:12px;flex-shrink:0}
.stops{gap:16px}.stops i{width:26px}.stops a{font-size:13px;min-height:48px}.stops a span{font-size:11px}
.hint{display:none}.next-scene{margin-left:auto;display:flex;align-items:center;gap:20px;text-align:left;border-top:1px solid #e0c79e80;min-width:245px;min-height:72px;padding:10px 0 0;font-size:13px}
.next-scene img{width:80px;height:52px;object-fit:cover;object-position:65% 70%}.next-scene svg{margin-left:auto;width:22px;flex-shrink:0;transition:transform .18s}.next-scene:hover svg{transform:translateX(4px)}
#error{bottom:115px;left:7.3%;right:auto;max-width:420px;line-height:1.6}
header{padding-top:26px;padding-bottom:24px}.brand small{font-size:11px;letter-spacing:.08em}.header-actions{gap:28px}#motion{font-size:11px}#all,#hair-access{font-size:13px}
#collections .choices button:nth-child(1) img{object-position:64% 60%}
@media(min-aspect-ratio:21/9){.scene .view{object-fit:contain;background:#211e18}.scene{inset:0 6%}.copy{max-width:350px}}
@media(max-width:700px){
 header{padding:17px 6%;align-items:flex-start}.brand{font-size:14px;letter-spacing:1px}.brand small{font-size:11px;letter-spacing:0}.header-actions{gap:0 14px}#all,#hair-access{font-size:12px}#motion{font-size:11px}
 .scene{bottom:245px}.scene .view,#view1,#view2{object-position:67% 55%;transform:none}
 .scene #view1{object-position:63% 55%}.scene #view2{object-position:77% 55%}
 #walk-film{object-position:64% 55%}#skip-walk{right:6%;top:105px}
 .shade{background:linear-gradient(0deg,#191713,transparent 19%,transparent 79%,#15130f88)}
 .copy,.copy[data-position=preto],.copy[data-position=dourado],.copy[data-position=granito]{top:auto;left:7%;right:7%;bottom:134px;max-width:none;display:grid;grid-template-columns:1fr auto;column-gap:14px;align-items:center}
 .copy h1,.copy[data-position] h1{font-size:48px;line-height:.98;letter-spacing:-.02em}.copy p{font-size:12px;margin-top:10px;max-width:27ch;grid-column:1}.copy #view-hair{grid-column:2;grid-row:1/3;min-width:0;padding:12px 14px;font-size:12px;gap:12px;margin:0;min-height:46px}.copy #view-hair svg{width:16px}
 .copy[data-position=entrada]{display:block;bottom:125px}.copy[data-position=entrada] h1{font-size:43px}.copy[data-position=entrada] p{max-width:none;margin-top:12px}
 .copy #scroll-guide{display:none}
 .journey-nav{left:6%;right:6%;bottom:max(12px,env(safe-area-inset-bottom));display:grid;grid-template-columns:auto 1fr;gap:5px 12px}.stops{grid-column:1/-1;grid-row:1;justify-content:space-between;gap:8px}.stops i{flex:1;width:auto;max-width:30px}.stops a{font-size:12px;min-height:44px;padding:0}.stops a span{font-size:11px}
 #back{grid-row:2;font-size:12px;min-width:65px;padding:0;gap:7px}.next-scene{grid-row:2;grid-column:2;justify-self:end;min-width:0;min-height:48px;border-top:0;padding:0;gap:12px;font-size:12px}.next-scene img{width:44px;height:32px}.next-scene svg{width:18px}
 #error{left:6%;right:6%;max-width:none;bottom:250px;font-size:12px}
}
@media(max-width:360px){.copy,.copy[data-position]{column-gap:7px}.copy h1,.copy[data-position] h1{font-size:42px}.copy #view-hair{padding:10px;gap:6px}.next-scene{font-size:11px;gap:8px}.next-scene img{width:36px}.header-actions{gap:0 10px}}
@media(max-height:600px) and (min-width:701px){.copy,.copy[data-position]{top:30%;bottom:auto}.copy h1,.copy[data-position] h1{font-size:59px}.copy p{margin-top:12px}.copy #view-hair{margin-top:18px;min-height:44px;padding:10px 18px}.journey-nav{bottom:12px}.next-scene{min-height:54px}.next-scene img{height:40px;width:62px}}
@media(max-height:650px) and (max-width:700px){.scene{bottom:220px}.copy,.copy[data-position]{bottom:126px}.copy[data-position=entrada] h1{font-size:35px}.copy[data-position=entrada]{bottom:122px}.copy p{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.next-scene svg{transition:none}}
@media(hover:none) and (pointer:coarse){.copy #scroll-guide{display:none}}