*{box-sizing:border-box;margin:0;padding:0}
:root{
--black:#0b0b0b;
--main:#eed1d0;
--ivory:#F5EFE1;
--gold:#C9A35C;
--cont:clamp(20px,4.5vw,80px);
--vertical:clamp(18px,3.2vw,55px);
--smooth:cubic-bezier(.76,0,.24,1);
--ease:.8s cubic-bezier(.84,0,.16,1);
--mono:'Space Mono',ui-monospace,Menlo,monospace;
--helv:'Archivo',Helvetica,Arial,sans-serif;
--edito:'Instrument Serif',Georgia,serif;
--cond:'Anton',Archivo,Helvetica,Arial,sans-serif;
}
html,body{height:100%}
body{
background:var(--black);
color:var(--main);
font-family:var(--mono);
overflow:hidden;
-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;cursor:pointer}
.topnav{
position:fixed;
left:0;top:0;right:0;
z-index:9;
padding-top:var(--vertical);
padding-left:var(--cont);
padding-right:var(--cont);
mix-blend-mode:difference;
color:#fff;
visibility:visible;
}
.topnav_grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:start;
}
.nav_item{
display:flex;
flex-direction:row;
gap:2ch;
line-height:1.4;
text-transform:uppercase;
font-size:clamp(14px,1.05vw,18px);
letter-spacing:.02em;
width:max-content;
}
.nav_item.right{
justify-self:end;
flex-direction:row-reverse;
cursor:pointer;
}
.nav_text{overflow:hidden;display:block}
.nav_text span{display:inline-block;white-space:nowrap}
.link-icon{display:inline-block}
.nav_logo{
position:fixed;
z-index:9;
top:var(--vertical);
left:50%;
transform:translateX(-50%);
pointer-events:none;
mix-blend-mode:difference;
color:#fff;
}
.nav_logo a{
pointer-events:auto;
display:block;
font-family:var(--cond);
font-weight:400;
font-size:clamp(30px,2.8vw,46px);
letter-spacing:.01em;
line-height:.9;
transform:translateY(-50%);
text-transform:uppercase;
}
.stage{
position:fixed;
inset:0;
user-select:none;
overflow:hidden;
background:var(--black);
}
.hero-grid{
position:absolute;
inset:0;
display:grid;
grid-template-columns:1fr;
gap:0;
}
.hero-cell{
position:relative;
overflow:hidden;
min-height:0;
}
.hero-cell img{
width:100%;
height:100%;
object-fit:cover;
display:block;
filter:grayscale(1) contrast(1.12) brightness(.82);
transform:scale(1.02);
}
.hero-shade{
position:absolute;
inset:0;
background:color-mix(in srgb,var(--black) 35%,transparent);
pointer-events:none;
}
.burger{
position:fixed;
top:0;left:0;right:0;
height:100vh;
height:100svh;
z-index:10;
visibility:hidden;
pointer-events:none;
color:var(--ivory);
}
.burger.visible{visibility:visible !important}
.burger.active{pointer-events:auto}
.burger.active .burger_item{pointer-events:auto}
.burger_overlay{
position:absolute;
inset:0;
pointer-events:none;
background-color:color-mix(in srgb,var(--black) 50%,transparent);
-webkit-backdrop-filter:blur(20px);
backdrop-filter:blur(20px);
}
.burger_inner{
position:relative;
z-index:1;
height:100%;
display:flex;
flex-direction:column;
justify-content:center;
}
.burger_list{
display:flex;
flex-direction:column;
position:relative;
padding-left:var(--cont);
padding-right:var(--cont);
}
.burger_row{
display:flex;
flex-direction:row;
gap:2.2vw;
align-items:flex-start;
}
.burger_item-parent{
position:relative;
display:flex;
transition:filter 1s var(--smooth),opacity 1s var(--smooth);
}
.burger:has(.burger_item-parent:hover) .burger_item-parent:not(:hover){
filter:blur(12px);
-webkit-filter:blur(12px);
opacity:.3;
}
.burger_item{
pointer-events:none;
padding-bottom:1.1vw;
position:relative;
}
.burger_inner_line{
display:flex;
flex-direction:row;
gap:15px;
align-items:flex-start;
}
.burger_index{
font-family:var(--mono);
position:relative;
overflow:hidden;
padding-top:.6em;
}
.burger_index-text{
font-size:min(1.6216216216vh,.9375vw);
line-height:1;
letter-spacing:.04em;
display:block;
color:var(--gold);
}
.burger_item-chars{
clip-path:inset(-1.2em 0);
overflow:visible;
}
.burger_letter-mask{
overflow:visible;
display:block;
}
.burger-font{
line-height:.9;
white-space:nowrap;
display:block;
text-transform:uppercase;
}
.burger-font.font-helv{
font-family:var(--cond);
font-weight:400;
font-size:min(18.5vh,10.8vw);
letter-spacing:.005em;
text-transform:uppercase;
}
.burger-font.font-editorial{
font-family:var(--cond);
font-weight:400;
font-style:normal;
font-size:min(18.5vh,10.8vw);
letter-spacing:.005em;
padding-right:.06em;
text-transform:uppercase;
}
.ch{
display:inline-block;
overflow:hidden;
vertical-align:top;
clip-path:inset(-0.2em 0);
}
.ch-in{
display:inline-block;
white-space:pre;
width:max-content;
will-change:width;
}
.burger_slash{
width:min(4.3918918919vh,2.5390625vw);
aspect-ratio:55/201;
align-self:stretch;
display:flex;
justify-content:center;
align-items:center;
flex:none;
}
.burger_slash svg{width:100%;height:100%;display:block}
.burger_slash svg path{stroke:var(--gold);}
.burger_close{
position:absolute;
right:var(--cont);
top:var(--vertical);
display:flex;
flex-direction:row;
gap:2ch;
cursor:pointer;
font-size:clamp(14px,1.05vw,18px);
line-height:1.4;
text-transform:uppercase;
z-index:2;
transition:opacity .8s var(--smooth),filter .8s var(--smooth);
opacity:0;
filter:blur(10px);
-webkit-filter:blur(10px);
}
.burger.active .burger_close{
opacity:1;
filter:blur(0);
-webkit-filter:blur(0);
}
.burger_close .plus{
display:inline-block;
transform:rotate(45deg);
}
@media screen and (max-width:1023px){
.hero-grid{grid-template-columns:1fr;grid-template-rows:1fr}
.burger_list{align-items:center;text-align:center}
.burger_row{flex-direction:column;gap:0;align-items:center}
.burger_item{padding:10px 0}
.burger_inner_line{gap:10px;align-items:flex-start;justify-content:center}
.burger_index{padding-top:12px}
.burger_index-text{font-size:11px}
.burger-font.font-helv,.burger-font.font-editorial{font-size:11.5vw;line-height:1}
.burger_slash{display:none}
.topnav{font-size:14px}
.nav_logo a{font-size:26px}
}
@media screen and (max-width:479px){
:root{--cont:20px}
.burger_item-chars{clip-path:inset(-.2em 0)}
.burger-font.font-helv,.burger-font.font-editorial{font-size:15vw}
.topnav .nav_item .nav_text:last-child{display:none}
.topnav_grid{align-items:center}
}