/* RENAE interactive layer */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
:root{--rx-gold:hsl(38,60%,52%);--rx-ink:hsl(30,10%,12%);--rx-cream:hsl(35,30%,96%);--rx-ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-behavior:smooth}
::selection{background:hsl(38 60% 52% / .22)}
:focus-visible{outline:1px solid var(--rx-gold);outline-offset:4px}
html.rx-lock{overflow:hidden}

.rx-skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--rx-ink);color:var(--rx-cream);padding:12px 18px;font:500 10px/1 Inter,sans-serif;letter-spacing:.25em;text-transform:uppercase;text-decoration:none}
.rx-skip:focus{left:12px}

/* reading progress */
#rx-progress{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,hsl(38 60% 52% / .25),var(--rx-gold));z-index:125;pointer-events:none}

/* sticky bar */
#rx-bar{position:fixed;top:0;left:0;right:0;z-index:110;display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px;padding:0 clamp(20px,4.5vw,64px);background:hsl(35 30% 96% / .84);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);border-bottom:1px solid hsl(38 60% 52% / .16);transform:translateY(-101%);transition:transform .55s var(--rx-ease),box-shadow .55s var(--rx-ease)}
#rx-bar.on{transform:none;box-shadow:0 12px 30px -22px hsl(30 10% 12% / .45)}
#rx-bar .rx-logo{font-family:"Playfair Display",serif;font-size:17px;letter-spacing:.5em;padding-left:.5em;color:var(--rx-ink);text-decoration:none}
#rx-bar nav{display:flex;gap:32px}
#rx-bar nav a{position:relative;padding:8px 0;font:400 10px/1 Inter,sans-serif;letter-spacing:.34em;text-transform:uppercase;color:hsl(30 10% 12% / .62);text-decoration:none;transition:color .3s}
#rx-bar nav a::after{content:"";position:absolute;left:0;right:.34em;bottom:0;height:1px;background:var(--rx-gold);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--rx-ease)}
#rx-bar nav a:hover,#rx-bar nav a[aria-current]{color:var(--rx-ink)}
#rx-bar nav a:hover::after,#rx-bar nav a[aria-current]::after{transform:scaleX(1);transform-origin:left}

/* menu buttons */
.rx-burger,.rx-fab,.rx-close{width:44px;height:44px;border:0;padding:0;background:transparent;color:var(--rx-ink);display:none;place-items:center;cursor:pointer}
.rx-burger span,.rx-fab span,.rx-close span{position:relative;display:block;width:20px;height:1px;background:currentColor}
.rx-burger span::before,.rx-burger span::after,.rx-fab span::before,.rx-fab span::after{content:"";position:absolute;left:0;height:1px;background:currentColor;transition:width .4s var(--rx-ease)}
.rx-burger span::before,.rx-fab span::before{top:-6px;width:20px}
.rx-burger span::after,.rx-fab span::after{top:6px;width:12px}
.rx-burger:hover span::after,.rx-fab:hover span::after{width:20px}
.rx-fab{position:fixed;top:14px;right:14px;z-index:115;border-radius:50%;background:hsl(35 30% 96% / .86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px hsl(38 60% 52% / .35),0 8px 24px -14px hsl(30 10% 12% / .5);transition:opacity .4s,transform .4s var(--rx-ease)}
html.rx-bar-on .rx-fab{opacity:0;transform:scale(.85);pointer-events:none}
.rx-close{display:grid;position:absolute;top:14px;right:14px}
.rx-close span{background:transparent}
.rx-close span::before,.rx-close span::after{content:"";position:absolute;left:0;top:0;width:20px;height:1px;background:currentColor}
.rx-close span::before{transform:rotate(45deg)}
.rx-close span::after{transform:rotate(-45deg)}

/* full-screen menu */
#rx-menu{position:fixed;inset:0;z-index:130;display:flex;flex-direction:column;justify-content:center;padding:88px clamp(28px,8vw,120px) 72px;background:var(--rx-cream);overflow-y:auto;opacity:0;transition:opacity .45s var(--rx-ease)}
#rx-menu[hidden]{display:none}
#rx-menu:focus{outline:none}
#rx-menu.open{opacity:1}
#rx-menu::before{content:"";position:absolute;inset:0;background:radial-gradient(760px 480px at 88% 12%,hsl(38 60% 52% / .12),transparent 62%);pointer-events:none}
.rx-m-eyebrow{position:relative;margin:0 0 22px;font:400 10px/1 Inter,sans-serif;letter-spacing:.45em;text-transform:uppercase;color:var(--rx-gold)}
.rx-m-main,.rx-m-sub{position:relative;display:flex}
.rx-m-main{flex-direction:column;align-items:flex-start;gap:4px}
.rx-m-sub{flex-wrap:wrap;gap:10px 34px}
.rx-m-main a,.rx-m-sub a{text-decoration:none;opacity:0;transform:translateY(18px);transition:opacity .6s var(--rx-ease) calc(var(--i) * 70ms + 120ms),transform .6s var(--rx-ease) calc(var(--i) * 70ms + 120ms),color .3s}
.rx-m-main a{font-family:"Playfair Display",serif;font-size:clamp(40px,9vw,76px);line-height:1.12;color:var(--rx-ink)}
.rx-m-sub a{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(22px,4.5vw,28px);color:hsl(30 10% 12% / .72)}
#rx-menu.open .rx-m-main a,#rx-menu.open .rx-m-sub a{opacity:1;transform:none}
.rx-m-main a:hover,.rx-m-main a[aria-current],.rx-m-sub a:hover{color:var(--rx-gold);font-style:italic}
.rx-m-line{position:relative;width:64px;height:1px;margin:38px 0;background:var(--rx-gold);opacity:.55}
.rx-m-foot{position:absolute;left:clamp(28px,8vw,120px);bottom:28px;margin:0;font:400 9px/1 Inter,sans-serif;letter-spacing:.42em;text-transform:uppercase;color:hsl(30 10% 12% / .4)}

/* hero */
.rx-ch{display:inline-block;animation:rxLetter 1.5s var(--rx-ease) both;animation-delay:calc(var(--i) * 110ms + 150ms)}
@keyframes rxLetter{from{opacity:0;transform:translateY(32%);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.rx-spot{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s;background:radial-gradient(520px circle at var(--x,50%) var(--y,40%),hsl(38 60% 52% / .14),transparent 62%)}
.rx-spot.on{opacity:1}
.rx-par{will-change:transform}

/* cards */
.js .rx-card.rx-card{transition:opacity .9s var(--rx-ease),transform .6s var(--rx-ease),box-shadow .6s var(--rx-ease)}
.rx-card img{transition:transform 1.4s var(--rx-ease)}
.rx-click{cursor:pointer}
@media (hover:hover){
.js .rx-card.rx-card:hover{transform:translateY(-5px)}
.js .rx-box.rx-box:hover{box-shadow:0 0 0 1px hsl(38 60% 52% / .35),0 30px 55px -34px hsl(30 10% 12% / .55)}
.rx-card:hover img{transform:scale(1.045)}
}

/* arrows */
.rx-arr,.rx-arl{display:inline-block;transition:transform .45s var(--rx-ease)}
a:hover .rx-arr,button:hover .rx-arr,.rx-card:hover .rx-arr{transform:translateX(6px)}
a:hover .rx-arl{transform:translateX(-6px)}

/* buttons */
.rx-btn{background-image:linear-gradient(110deg,transparent 35%,hsl(40 70% 72% / .32) 50%,transparent 65%);background-size:250% 100%;background-position:130% 0;background-repeat:no-repeat;transition:background-position 1s var(--rx-ease),background-color .35s,color .35s,border-color .35s}
.rx-btn:hover{background-position:-30% 0}

/* back to top */
.rx-top{position:fixed;right:clamp(14px,2.5vw,28px);bottom:clamp(14px,2.5vw,28px);z-index:105;width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--rx-ink);background:hsl(35 30% 96% / .9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px hsl(38 60% 52% / .4),0 10px 26px -16px hsl(30 10% 12% / .55);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .45s,transform .45s var(--rx-ease),color .3s}
.rx-top.on{opacity:1;transform:none;pointer-events:auto}
.rx-top:hover{color:var(--rx-gold)}
.rx-top svg{width:16px;height:16px}

@media (max-width:767px){
#rx-bar{height:58px}
#rx-bar nav{display:none}
.rx-burger,.rx-fab{display:grid}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
@view-transition{navigation:none}
.rx-ch{animation:none}
.rx-spot{display:none}
#rx-bar,#rx-menu,.rx-m-main a,.rx-m-sub a,.rx-card,.rx-card img,.rx-arr,.rx-arl,.rx-btn,.rx-top{transition:none!important}
.js .rx-card.rx-card:hover,.rx-card:hover img{transform:none}
}
