@font-face{font-family:Anton;src:url(fonts/anton-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/archivo-latin-standard-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}

:root{
  --gold:#d4aa52;
  --gold-lit:#f5e2ad;
  --gold-deep:#6f5322;
  --black:#000;
  --white:#fff;
  --display:Anton,"Arial Narrow",Impact,sans-serif;
  --text:Archivo,system-ui,sans-serif;
  --h:1vh;
  --u:min(1.9vw,calc(var(--h)*1.7778));
  --glyph:calc(var(--u)*18.6);
  --tier:calc(var(--u)*22.2);
  --rail-top:calc(var(--u)*4.8);
  --tee:calc(var(--u)*21.2);
  --print:calc(var(--u)*13.5);
  --edge:calc(var(--u)*3.6);
  --gutter:clamp(18px,3vw,56px);
}
@supports (height:1svh){:root{--h:1svh}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:dark}
body{margin:0;background:var(--black);color:var(--white);font:400 17px/1.5 var(--text);overflow-x:clip}
img,video,svg{display:block}
img,video{max-width:100%;height:auto}
ul{list-style:none;margin:0;padding:0}
h1,h2,p,figure{margin:0}
a{color:inherit}
h2{font:400 clamp(58px,10.6vw,200px)/1.02 var(--display);letter-spacing:.002em}
::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.defs{position:absolute}

.wall{background:
  radial-gradient(40% 62% at 16% -10%,rgba(255,221,160,.2),transparent 72%),
  radial-gradient(40% 62% at 50% -12%,rgba(255,221,160,.13),transparent 72%),
  radial-gradient(40% 62% at 84% -10%,rgba(255,221,160,.2),transparent 72%),
  url(img/wall-black.webp) 0 0/256px}

.rack{position:relative}
html.js .rack{height:calc(100vh + var(--travel,0px));height:calc(calc(var(--h)*100) + var(--travel,0px))}
.rack-sticky{position:relative;height:100vh;height:calc(var(--h)*100);min-height:calc(var(--u)*54);overflow:hidden}
html.js .rack-sticky{position:sticky;top:0}

.post{position:absolute;top:0;bottom:0;width:calc(var(--u)*1.05);z-index:1;background:
  repeating-linear-gradient(180deg,transparent 0 calc(var(--u)*.55),rgba(0,0,0,.78) calc(var(--u)*.55) calc(var(--u)*1.25),transparent calc(var(--u)*1.25) calc(var(--u)*1.8)) center/32% 100% no-repeat,
  linear-gradient(90deg,#3b2c12,#8f7038 48%,#2a1f0c);
  box-shadow:calc(var(--u)*.5) 0 calc(var(--u)*.9) rgba(0,0,0,.6)}
.post-l{left:calc(var(--u)*1.1)}
.post-r{right:calc(var(--u)*1.1)}

.nav{position:absolute;top:0;left:0;right:0;z-index:6;height:var(--rail-top);display:flex;align-items:center;gap:calc(var(--u)*3);padding:0 calc(var(--u)*3.6)}
.brand img{width:calc(var(--u)*3.2);height:calc(var(--u)*3.2);min-width:34px;min-height:34px;border-radius:50%}
.nav nav{display:flex;gap:calc(var(--u)*2.2);margin-right:auto}
.nav a{text-decoration:none;font-size:clamp(14px,calc(var(--u)*1.2),20px);font-weight:600;white-space:nowrap}
.nav nav a:hover,.nav-phone:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.25em}
.nav-phone{font-variant-numeric:tabular-nums}

.rail{position:absolute;left:0;right:0;height:var(--tier);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.rail.dragging{cursor:grabbing}
.rail-a{top:var(--rail-top);z-index:4}
.rail-b{top:calc(var(--rail-top) + var(--tier));z-index:3}
.track{position:relative;display:inline-flex;align-items:flex-start;width:max-content;padding:0 var(--edge)}
html.js .rack .track{will-change:transform;opacity:0}
html.js.ready .rack .track{opacity:1}

.bar{position:absolute;top:calc(var(--u)*.55);left:-100vw;right:-100vw;height:calc(var(--u)*.62);z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#f5e2ad 0,#bb9249 36%,#6a4f20 64%,#c9a25b 100%);
  box-shadow:0 calc(var(--u)*.45) calc(var(--u)*.7) rgba(0,0,0,.7)}

.hang{position:relative;flex:none;transform-origin:50% 0;will-change:transform}
.letter{padding-top:calc(var(--glyph)*.095);margin-right:calc(var(--glyph)*.028)}
.letter svg{position:absolute;top:0;left:50%;width:calc(var(--glyph)*.25);height:calc(var(--glyph)*.2143);transform:translateX(-50%)}
.letter.wide svg{width:calc(var(--glyph)*.43)}
.letter.last{margin-right:calc(var(--u)*1.6)}
.glyph{display:block;font:400 var(--glyph)/1 var(--display);color:transparent;
  background:
    linear-gradient(104deg,rgba(255,250,228,0) 16%,rgba(255,250,228,.5) 23%,rgba(255,250,228,0) 31%,rgba(255,250,228,0) 60%,rgba(255,250,228,.24) 65%,rgba(255,250,228,0) 72%),
    linear-gradient(178deg,#f5e2ad 0%,#d8b266 26%,#b58b41 58%,#8f6b2d 84%,#b58b41 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-stroke:.004em rgba(255,240,205,.55);
  filter:drop-shadow(0 0 .07em rgba(255,200,105,.42))}

.tee{margin:0 calc(var(--tee)*-.018);transform-origin:var(--hx) 0;z-index:1}
.tee::before{content:"";position:absolute;inset:4% -6% -2%;z-index:-1;background:radial-gradient(closest-side,rgba(255,226,170,.24),rgba(255,226,170,.1) 62%,transparent);pointer-events:none}
.tee img{height:var(--tee);width:auto;max-width:none;-webkit-user-drag:none}
.print{width:var(--print);padding-top:calc(var(--print)*.2);margin:0 calc(var(--u)*.7);z-index:1}
.print svg{position:absolute;top:0;left:50%;width:calc(var(--print)*.26);height:calc(var(--print)*.2229);transform:translateX(-50%);z-index:1}
.print img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;box-shadow:calc(var(--u)*.35) calc(var(--u)*.7) calc(var(--u)*1.1) rgba(0,0,0,.65);-webkit-user-drag:none}
.rail-b .print.last{margin-right:calc(var(--u)*1.8)}

.rack-foot{position:absolute;left:0;right:0;bottom:0;z-index:5;display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:end;gap:calc(var(--u)*2);padding:0 calc(var(--u)*3.6) calc(var(--u)*1.5)}
.rack-line{font:400 clamp(26px,calc(var(--u)*2.9),60px)/1.02 var(--display);white-space:nowrap}
.rack-line span{display:block;font:500 clamp(14px,calc(var(--u)*1.2),20px)/1.3 var(--text);margin-top:.35em;color:var(--gold)}
.rack-meter{display:grid;justify-items:center;gap:.5em;min-width:calc(var(--u)*20)}
.rack-label{font-size:clamp(13px,calc(var(--u)*1.1),18px);font-weight:500;text-align:center;min-height:1.5em}
.meter{display:block;width:calc(var(--u)*16);height:2px;background:rgba(255,255,255,.24)}
.meter i{display:block;height:100%;background:var(--gold);transform:scaleX(var(--p,0));transform-origin:0 50%}
.rack-foot .tag{justify-self:end}

.tag{--notch:clamp(10px,.85em,16px);position:relative;display:inline-grid;gap:.05em;padding:.62em 1.25em .62em 2.35em;background:var(--gold);color:var(--black);text-decoration:none;
  clip-path:polygon(var(--notch) 0,100% 0,100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)),0 var(--notch));
  -webkit-mask:radial-gradient(circle at 1.2em 50%,transparent .27em,#000 .3em);mask:radial-gradient(circle at 1.2em 50%,transparent .27em,#000 .3em);
  transform-origin:1.2em 50%;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.tag b{font:400 clamp(20px,1.7vw,30px)/1.1 var(--display);letter-spacing:.01em}
.tag small{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.tag:hover{transform:rotate(-3deg)}
.tag:focus-visible{outline:none;background:var(--white)}
.yp-tag,.contact .tag{background:var(--black);color:var(--gold)}
.yp-tag small,.contact .tag small{color:var(--white)}
.yp-tag:focus-visible,.contact .tag:focus-visible{background:var(--white);color:var(--black);box-shadow:inset 0 0 0 3px var(--black)}
.yp-tag:focus-visible small,.contact .tag:focus-visible small{color:var(--black)}

.float-tag{position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:20;opacity:0;visibility:hidden;color:var(--gold);transition:opacity .25s,visibility .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.float-tag::before{content:"";position:absolute;inset:1.5px;z-index:-1;background:var(--black);clip-path:polygon(var(--notch) 0,100% 0,100% 100%,var(--notch) 100%,0 calc(100% - var(--notch)),0 var(--notch))}
.float-tag small{color:var(--white)}
.float-tag.show{opacity:1;visibility:visible}
.float-tag:focus-visible{background:var(--black);color:var(--black)}
.float-tag:focus-visible::before{background:var(--white)}
.float-tag:focus-visible small{color:var(--black)}

.quality{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40vw);min-height:100vh;min-height:calc(var(--h)*100);background:var(--gold);color:var(--black)}
.quality-copy{display:flex;align-items:flex-end;padding:var(--gutter)}
.quality-copy h2{max-width:6.4em}
.quality-film{position:relative;min-height:0;overflow:hidden;background:var(--black)}
.quality-film video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform:scale(1.32);transform-origin:50% 100%}
.quality-film figcaption{position:absolute;left:0;right:0;bottom:0;padding:3em var(--gutter) 1.1em;font-size:15px;font-weight:500;color:var(--white);background:linear-gradient(transparent,rgba(0,0,0,.78))}

.store{position:relative;background:var(--black);color:var(--white)}
.store-pan{overflow:hidden}
.store-pan img{width:100%}
.store-copy{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1em var(--gutter);margin-top:clamp(-260px,-17vw,-90px);padding:clamp(70px,9vw,180px) var(--gutter) var(--gutter);background:linear-gradient(transparent,rgba(0,0,0,.94) clamp(70px,9vw,180px))}
.store-copy h2{max-width:8.2em}
.store-copy p{font-size:clamp(17px,1.5vw,24px);font-weight:500;color:var(--gold)}

.ypass{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(10px,1.4vw,24px);padding:clamp(60px,8vw,150px) var(--gutter);background:var(--white);color:var(--black)}
.ypass h2{grid-column:1/9;grid-row:1;align-self:start}
.ypass figure img,.ypass figure video{width:100%}
.yp-film{grid-column:9/13;grid-row:1/3;align-self:start}
.yp-film video{aspect-ratio:720/1010;object-fit:cover;object-position:50% 0;background:var(--black)}
.yp-a{grid-column:1/4;grid-row:2;align-self:end}
.yp-b{grid-column:4/9;grid-row:2/4;margin-top:clamp(20px,3vw,60px)}
.yp-c{grid-column:10/13;grid-row:2/4;align-self:end}
.nowrap{white-space:nowrap}
.yp-tag{grid-column:1/4;grid-row:3;justify-self:start;align-self:start;margin-top:clamp(10px,1.4vw,24px)}

.elyx{padding:clamp(60px,8vw,150px) 0 0}
.elyx-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1em var(--gutter);padding:0 var(--gutter)}
.elyx-spec{display:grid;gap:.55em;justify-items:end}
.elyx-spec p{font-size:clamp(17px,1.5vw,24px);font-weight:500;color:var(--gold)}
.sizes{display:flex;gap:6px}
.sizes li{display:grid;place-items:center;min-width:3.1em;padding:.75em .6em;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0 1px,transparent 1px 2px),
  var(--white);color:var(--black);font-weight:700;font-size:15px;line-height:1;box-shadow:inset 0 3px 0 var(--gold),inset 0 -3px 0 var(--gold)}
.elyx-wall{--tee:27.4vw;display:flex;justify-content:space-between;margin-top:clamp(18px,2.4vw,44px);padding:0 1vw clamp(10px,1.4vw,24px);overflow:hidden}
.elyx-wall .rail{position:relative;left:auto;right:auto;height:auto;flex:1 1 50%;cursor:default}
.elyx-wall .track{display:flex;justify-content:space-around;width:100%;padding:0}
.elyx-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;background:var(--black)}
.elyx-strip img{width:100%}

.floor{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(24px,3vw,48px);padding:clamp(60px,8vw,150px) var(--gutter);background:var(--white);color:var(--black)}
.floor h2{font-size:clamp(50px,7.4vw,140px)}
.rows{position:relative;border-top:1px solid rgba(0,0,0,.22)}
.rows li{border-bottom:1px solid rgba(0,0,0,.22);width:50%}
.rows a{display:flex;align-items:baseline;justify-content:space-between;gap:1em;padding:.14em 0 .16em;text-decoration:none;font:400 clamp(30px,3.9vw,74px)/1.14 var(--display);color:rgba(0,0,0,.56);transition:color .2s}
.rows em{font:500 clamp(14px,1.2vw,18px)/1 var(--text);margin-left:.5em;font-style:normal;color:var(--gold-deep);white-space:nowrap}
.row-go{font:500 clamp(13px,1.05vw,16px)/1 var(--text);white-space:nowrap;color:var(--gold-deep);opacity:0;transition:opacity .2s}
.rows li.active{border-bottom-color:var(--gold);box-shadow:0 1px 0 var(--gold)}
.rows li.active a,.rows a:focus-visible{color:var(--black)}
.rows li.active .row-go,.rows a:focus-visible .row-go{opacity:1}
.rows img{position:absolute;top:0;right:0;width:calc(50% - var(--gutter));height:100%;object-fit:cover;opacity:0;transition:opacity .35s;pointer-events:none}
.rows li.active img{opacity:1}

.contact{position:relative;background:var(--gold);color:var(--black);overflow:hidden;--glyph:min(20vw,calc(var(--h)*38));--u:1vw;--edge:3.6vw}
.digits{display:flex;padding-top:calc(var(--u)*1.6);text-decoration:none;color:inherit}
.contact .rail{position:relative;height:auto;left:auto;right:auto;cursor:pointer;flex:none}
.contact .rail:first-child{padding-left:var(--edge)}
.contact .rail+.rail{margin-left:calc(var(--glyph)*.2)}
.contact .track{padding:0;display:flex}
.contact .bar{background:linear-gradient(180deg,#4a4a4a 0,#111 40%,#000 66%,#2c2c2c 100%);box-shadow:0 .4vw .8vw rgba(70,45,5,.45);top:.5vw;height:.5vw}
.contact .letter{margin-right:calc(var(--glyph)*.02)}
.contact .gap{flex:none;width:calc(var(--glyph)*.2)}
.contact .glyph{background:
  linear-gradient(104deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.24) 25%,rgba(255,255,255,0) 32%),
  linear-gradient(178deg,#303030 0%,#0c0c0c 46%,#000 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-stroke:0;
  filter:drop-shadow(.03em .055em .05em rgba(70,45,5,.55))}
.contact-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15vw);align-items:end;gap:var(--gutter);padding:clamp(20px,2.4vw,44px) var(--gutter) var(--gutter)}
.contact-copy h2{font-size:clamp(52px,10vw,190px);margin-bottom:.16em}
.contact-tags{display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,16px)}
.contact-film{overflow:hidden}
.contact-film video{width:100%;aspect-ratio:720/1180;object-fit:cover;transform:scale(1.42);transform-origin:50% 100%}

.foot{display:flex;flex-wrap:wrap;align-items:center;gap:.6em clamp(18px,3vw,44px);padding:18px var(--gutter);background:var(--black);color:var(--white);font-size:15px;font-weight:500}
.foot img{width:36px;height:36px;border-radius:50%}
.foot a:last-child{margin-left:auto;color:var(--gold)}

html.calm .rail,html:not(.js) .rail{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:auto}
html.calm .bar,html:not(.js) .bar{left:0;right:0}
html.calm *,html.calm *::before,html.calm *::after{transition:none!important;scroll-behavior:auto!important}

@media (orientation:portrait) and (min-width:761px){
  :root{
    --tier:max(calc(var(--u)*22.2),calc(var(--h)*36));
    --tee:calc(var(--tier)*.96);
    --print:calc(var(--tier)*.62);
  }
  .rack-foot{grid-template-columns:minmax(0,1fr) auto}
  .rack-line{grid-column:1/-1;font-size:calc(var(--u)*4.2)}
  .rack-line span{font-size:calc(var(--u)*1.4)}
  .rack-meter{justify-items:start}
  .rack-label{text-align:left}
}

@media (max-width:900px){
  .quality{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .quality-copy{padding:var(--gutter);padding-top:clamp(60px,12vw,110px)}
  .quality-film{height:110vw;max-height:calc(var(--h)*88)}
  .quality-film video{transform:none}
  .store-pan{overflow-x:auto;scrollbar-width:none}
  .store-pan img{width:auto;height:calc(var(--h)*64);max-width:none}
  .ypass h2{grid-column:1/-1}
  .yp-film{grid-column:1/8;grid-row:2/4;align-self:stretch;overflow:hidden}
  .yp-film video{height:100%;aspect-ratio:auto;transform:scale(1.18);transform-origin:50% 0}
  .yp-a{grid-column:8/13;grid-row:2;align-self:start}
  .yp-c{grid-column:8/13;grid-row:3;margin:0}
  .yp-b{grid-column:1/8;grid-row:4;margin:0}
  .yp-tag{grid-column:8/13;grid-row:4;align-self:end;margin:0;justify-self:stretch}
  .rows li,.rows li.active{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 34%;align-items:center;gap:12px;padding:10px 0;border-bottom-color:rgba(0,0,0,.22);box-shadow:none}
  .rows a{flex-direction:column;gap:.1em;padding:0;color:var(--black);grid-column:1;grid-row:1}
  .rows em{display:block;margin:.4em 0 0}
  .row-go{opacity:1;font-size:13px}
  .rows img{position:static;width:100%;height:auto;aspect-ratio:1;opacity:1;grid-column:2;grid-row:1}
  .contact-body{grid-template-columns:1fr}
  .contact-film{display:none}
}

@media (max-width:760px) and (orientation:portrait){
  :root{
    --u:1vw;
    --glyph:37.4vw;
    --rail-top:56px;
    --tier:max(calc(var(--glyph)*1.14),calc(var(--h)*29));
    --tee:calc(var(--tier)*1.02);
    --print:calc(var(--tier)*.66);
    --edge:4vw;
  }
  .rack-sticky{min-height:0}
  .post{display:none}
  .nav{padding:0 4vw;gap:14px}
  .nav nav{gap:12px}
  .nav a{font-size:13px}
  .brand img{width:34px;height:34px}
  .bar{top:2px;height:5px}
  .letter{margin-right:.4vw}
  .letter.last{margin-right:4vw}
  .rack-foot{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:0 4vw 18px}
  .rack-line{font-size:min(13.4vw,calc(var(--h)*7.4));white-space:normal}
  .rack-line span{font-size:16px}
  .rack-meter{justify-items:start;min-width:0;width:100%}
  .rack-label{text-align:left;font-size:14px}
  .meter{width:100%}
  .rack-foot .tag{justify-self:auto}
  .tag b{font-size:24px}
  .contact{--glyph:30vw}
  .digits{flex-direction:column;gap:8px;padding-top:4vw}
  .contact .rail:first-child{padding-left:4vw}
  .contact .rail,.contact .rail+.rail{padding-left:4vw;margin-left:0}
  .contact .track{min-width:92vw}
  .contact .bar{top:2px;height:4px}
  .contact-tags{flex-direction:column;align-items:flex-start}
  .elyx-wall{--tee:53vw;flex-direction:column;gap:14px;padding:0}
  .elyx-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .elyx-spec{justify-items:start}
  .foot a:last-child{margin-left:0}
  .float-tag{padding:.5em .95em .5em 2.1em}
  .float-tag b{font-size:18px}
  .float-tag small{font-size:12px}
}

@media (max-width:760px) and (orientation:portrait) and (max-height:779px){
  .rack-line{font-size:10vw;white-space:nowrap}
}

@media (max-width:760px) and (orientation:portrait) and (max-height:600px){
  .rack-label{display:none}
  .rack-meter{gap:0}
  .rack-foot{gap:8px;padding-bottom:12px}
}

@media (max-width:350px){
  .nav-phone{display:none}
  .nav{gap:10px}
  .nav nav{gap:10px;margin-right:0}
}

@media (max-height:560px) and (orientation:landscape){
  .brand img{min-width:26px;min-height:26px}
  .nav a{font-size:13px}
  .rack-foot{padding-bottom:calc(var(--u)*.7)}
  .rack-line{font-size:clamp(18px,calc(var(--u)*2.9),26px)}
  .rack-line span{font-size:12px;margin-top:.1em}
  .rack-meter{gap:.2em}
  .rack-label{font-size:12px}
  .rack-foot .tag{font-size:12px}
  .rack-foot .tag b{font-size:16px}
  .rack-foot .tag small{font-size:10.5px}
  .quality{min-height:0}
  .quality-copy{padding-top:var(--gutter)}
}
