/* The same moving coastline gradually reveals its frame. */
html.coastal-navigation header{background:rgb(250 247 240 / var(--coast-header,0))!important;backdrop-filter:none!important;border-bottom-color:rgb(48 52 43 / calc(var(--coast-header,0)*.1));transition:none}
html.coastal-navigation header::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#14120e50,transparent);opacity:calc(1 - var(--coast-header,0));pointer-events:none}
html.coastal-navigation header .logo{opacity:var(--coast-header,0);visibility:hidden}
html.coastal-header-visible header .logo{visibility:visible}
html.coastal-navigation header .logo-img-dark{opacity:1!important}
html.coastal-navigation header .logo-img-light{opacity:0!important}
html.coastal-navigation header :is(.navlinks a,.cart-btn,.cart-count,.lang-toggle,.lang-toggle [data-l].on){color:var(--coast-nav-color,#fff)!important;text-shadow:none;transition:none}
html.coastal-navigation header .burger span{background:var(--coast-nav-color,#fff);box-shadow:none}
html.coastal-navigation header .cart-count{background:rgb(90 126 110 / .4)}
.coast-frame-stage{position:relative;margin-top:calc(-1 * var(--header-h));background:#faf7f0}
.coast-frame-pin{position:sticky;top:0;isolation:isolate;overflow:hidden;background:#faf7f0}
.coast-frame-pin::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 28% 20%,#ffffffb0,transparent 65%);opacity:var(--frame-light,0)}
.coast-picture{position:absolute;inset:0;z-index:2;transform-origin:0 0;pointer-events:none}
.coast-picture .original-opening{pointer-events:auto}
.coast-frame-pin .original-opening{position:absolute;left:0;top:0;z-index:3;min-height:0;margin:0;padding:0;overflow:hidden;background:#9cbbb7;box-shadow:0 0 0 1px #725b4033}
.original-opening.framed-coast>img,.original-opening.framed-coast>.living-coast-video{inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transform:none}
.original-opening.framed-coast::after{opacity:var(--hero-shade,1);pointer-events:none}
.framed-coast .hero-full-content{position:absolute;top:50%;left:0;transform:translateY(-50%)}
.coast-art-frame{position:absolute;z-index:2;pointer-events:none;--wood:12px;background:#aa7f50;box-shadow:0 1px 1px #4f371b33,0 8px 16px #49382220,0 28px 44px -18px #49382240}
.coast-art-frame .frame-mat{position:absolute;inset:var(--wood);background:linear-gradient(145deg,#fffcf5,#f6f1e8);box-shadow:inset 1px 2px 3px #60492a45,0 0 0 1px #75522d70}
.frame-rail{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#b58e63 0px,#c4a078 1px,#ba946a 2px,#ae875c 4px,#c3a17b 5px,#b78d62 7px)}
.frame-top{height:var(--wood);bottom:auto;clip-path:polygon(0 0,100% 0,calc(100% - var(--wood)) 100%,var(--wood) 100%);filter:brightness(1.12)}
.frame-bottom{height:var(--wood);top:auto;clip-path:polygon(var(--wood) 0,calc(100% - var(--wood)) 0,100% 100%,0 100%);filter:brightness(.87)}
.frame-left,.frame-right{background:repeating-linear-gradient(90deg,#b58e63 0px,#c4a078 1px,#ba946a 2px,#ae875c 4px,#c3a17b 5px,#b78d62 7px);width:var(--wood)}
.frame-left{right:auto;clip-path:polygon(0 0,100% var(--wood),100% calc(100% - var(--wood)),0 100%);filter:brightness(1.04)}
.frame-right{left:auto;clip-path:polygon(0 var(--wood),100% 0,100% 100%,0 calc(100% - var(--wood)));filter:brightness(.94)}
.frame-arrival-copy{position:absolute;left:20px;right:auto;z-index:4;text-align:center;pointer-events:none;opacity:0;color:#393f34}
.frame-arrival-copy h2{font-family:var(--serif,Georgia,serif);font-weight:400;font-size:clamp(27px,3vw,43px);line-height:1.2;letter-spacing:-.025em;margin:0}
.frame-arrival-copy p{margin:12px 0 0;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#777a70}
.coast-frame-pin #studio-intro{position:absolute;top:var(--header-h);bottom:0;left:0;right:0;width:100%;margin:0 auto;z-index:1;padding-top:48px;padding-bottom:48px;background:transparent}
.coast-frame-pin .hero-room .supplied-hero{aspect-ratio:1.55}
.coast-frame-pin .hero-room .supplied-hero img{visibility:hidden;width:100%;height:100%;object-fit:cover}
.coast-frame-pin .hero-copy,.coast-frame-pin .hero-room figcaption{opacity:0}
.coast-frame-shop{position:absolute;inset:0;z-index:4}
.coast-frame-shop[hidden]{display:none}
.coast-frame-shop:focus-visible{outline:3px solid #fff;outline-offset:-6px}
@media(max-width:650px){
 .coast-frame-pin #studio-intro{bottom:auto;padding-top:24px;padding-bottom:24px;gap:24px}
 .coast-frame-pin .hero-room{grid-row:1}
 .coast-frame-pin .hero-copy{grid-row:2}
 .frame-arrival-copy p{font-size:9px}
}