:root{--vi-stage:100vh;--vi-stage:100dvh}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:#1E1D1A}
.vi-root{background:#1E1D1A;color:#fff;font-family:Montserrat,system-ui,sans-serif}
.vi-root a{color:#fff}
.vi-root a:hover{color:#F3E7D3}
#album{position:relative}
.vi-marker{position:absolute;left:0;width:1px;height:1px}
.vi-stage{position:sticky;top:0;height:var(--vi-stage);overflow:hidden;background:#1E1D1A;perspective:2400px;perspective-origin:50% 50%}
.vi-half{position:absolute;left:0;right:0;height:50%}
.vi-top-layer{top:0}
.vi-bottom-layer{bottom:0}
.vi-pane{position:absolute;inset:0;overflow:hidden;display:none}
.vi-pane.on{display:block}
.vi-pane.vi-bottom.on{display:flex}
.vi-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:3}
.vi-flap{position:absolute;left:0;right:0;bottom:0;height:50%;z-index:5;transform-origin:50% 0;transform-style:preserve-3d;display:none}
.vi-flap.on{display:block}
.vi-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.vi-back{transform:rotateX(180deg)}
.vi-dots{position:absolute;right:18px;top:50%;transform:translateY(-50%);z-index:11;display:flex;flex-direction:column;gap:10px}
.vi-dots span{display:block;width:8px;height:8px;border-radius:50%;background:#fff;opacity:.4;box-shadow:0 0 4px rgba(0,0,0,.5);transition:opacity .2s}
.vi-dots span.on{opacity:1}
.vi-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vi-photo-shade{position:absolute;inset:0}
.vi-grain{position:absolute;inset:0;width:100%;height:100%;opacity:.42;mix-blend-mode:overlay;pointer-events:none}
.vi-bottom .vi-grain{opacity:.45}
.vi-root a.vi-book{position:absolute;left:6%;bottom:clamp(20px,3vw,36px);z-index:2;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;background:#fff;color:#1E1D1A;text-decoration:none;font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.vi-root a.vi-book:hover{background:#F3E7D3;color:#1E1D1A}
.vi-top-head{position:relative;padding:clamp(28px,4vw,60px) 6% 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.vi-num{margin:0 0 6px 4px;font-size:12px;font-weight:600;letter-spacing:4px;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.vi-logo{margin:8px 0 0;line-height:0}
.vi-logo img{display:block;width:clamp(200px,20vw,300px);height:clamp(130px,13vw,190px);object-fit:contain;object-position:left center;filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.vi-note{margin:8px 0 0;font-family:Caveat,cursive;font-size:clamp(24px,2.4vw,34px);line-height:1.1;transform:rotate(-4deg);text-shadow:0 1px 8px rgba(0,0,0,.35)}
.vi-bottom{box-sizing:border-box;padding:clamp(40px,4.5vw,64px) 6% clamp(24px,3vw,40px);flex-direction:column;justify-content:space-between;gap:20px}
.vi-row1{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px 64px}
.vi-kw{margin:0;font-size:clamp(16px,1.7vw,22px);font-weight:700;line-height:1.5;letter-spacing:1px;text-transform:uppercase}
.vi-desc{margin:0;flex:0 1 560px;font-size:clamp(13px,1.3vw,17px);line-height:1.6;letter-spacing:1.5px;text-transform:uppercase;text-align:justify}
.vi-row2{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.vi-person{display:flex;align-items:center;gap:16px}
.vi-portrait{width:84px;height:84px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.3);flex:none}
.vi-pname{margin:0;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.vi-prole{margin:2px 0 0;font-family:Caveat,cursive;font-size:24px;line-height:1}
.vi-addr{margin:6px 0 0;font-size:12px;letter-spacing:2px;text-transform:uppercase}
.vi-root a.vi-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid #fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:2px;text-transform:uppercase;transition:background .2s,color .2s}
.vi-root a.vi-cta:hover{background:#fff;color:#1E1D1A}
.vi-root a.pin{color:#2B2622}
.vi-root a.pin:hover .pname{text-decoration:underline}
@media (max-width:700px){
.vi-bottom{padding:24px 6% 18px;gap:12px}
.vi-row1{flex-direction:column;gap:8px}
.vi-kw{font-size:14px;line-height:1.35}
.vi-desc{flex:none;font-size:11px;line-height:1.45;letter-spacing:.6px;text-align:left}
.vi-row2{gap:10px}
.vi-portrait{width:60px;height:60px}
.vi-logo img{width:170px;height:110px}
.vi-root a.vi-book{bottom:16px;padding:0 18px}
.vi-root a.vi-cta{padding:0 16px;font-size:11px}
}
.vi-map-m{display:none}
@media (max-width:700px){.vi-map-d{display:none}.vi-map-m{display:block}}
@media (max-width:700px) and (max-height:620px){
.vi-bottom{padding:16px 6% 12px;gap:8px}
.vi-kw{font-size:13px;line-height:1.3}
.vi-desc{font-size:10.5px;line-height:1.4}
.vi-portrait{width:44px;height:44px}
.vi-prole{font-size:20px}
.vi-root a.vi-cta{min-height:40px}
}