@font-face{font-family:Dana;src:url("fonts/DanaFaNum-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Dana;src:url("fonts/DanaFaNum-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Dana;src:url("fonts/DanaFaNum-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:Dana;src:url("fonts/DanaFaNum-ExtraBold.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  --gold:#d7b56a;
  --ivory:#f3ead6;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#07080b;color:var(--ivory)}
body{min-height:100svh;overflow:hidden;font-family:Dana,Tahoma,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button,a,summary{color:inherit;font:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(215,181,106,.28)}

.grain{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.preloader{position:fixed;inset:0;z-index:90;background:#07080b;display:grid;place-items:center;transition:opacity .8s ease,visibility .8s ease}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none}
.pre-logo{width:88px;opacity:.9}

.stage{position:relative;height:100svh;overflow:hidden}
.photo{position:absolute;inset:0}
.plate{width:100%;height:100%;object-fit:cover;object-position:center 32%;transform:scale(1.06);animation:ken 32s ease-in-out alternate infinite;filter:saturate(1.04)}
.sweep{position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,228,170,.08) 50%,transparent 60%);animation:sweep 9s ease-in-out infinite;mix-blend-mode:soft-light;pointer-events:none}
.wash{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(7,8,11,.55) 0%,rgba(7,8,11,.12) 14%,rgba(7,8,11,0) 28%),
  linear-gradient(0deg,rgba(7,8,11,.88) 0%,rgba(7,8,11,.42) 18%,rgba(7,8,11,0) 38%)}
.dust{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.dust i{position:absolute;bottom:-6px;width:2px;height:2px;border-radius:50%;background:rgba(215,181,106,.55);animation:rise linear infinite}

@keyframes ken{from{transform:scale(1.06)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@keyframes sweep{0%{transform:translateX(-70%)}50%,100%{transform:translateX(70%)}}
@keyframes rise{0%{opacity:0;transform:translateY(0)}20%{opacity:.6}100%{opacity:0;transform:translateY(-100vh)}}
@keyframes in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.topbar{position:absolute;z-index:12;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:calc(14px + var(--safe-t)) 18px 0;animation:in .8s both}
.wordmark{text-align:right}
.wordmark b{display:block;font-weight:500;font-size:13px;letter-spacing:.38em}
.wordmark small{display:block;margin-top:5px;font-size:9px;letter-spacing:.32em;color:var(--gold)}
.tools{display:flex;align-items:center;gap:8px}
.ghost{width:40px;height:40px;border:1px solid rgba(215,181,106,.28);font-size:10px;letter-spacing:.12em;color:var(--gold);background:rgba(7,8,11,.25);backdrop-filter:blur(8px)}
.menu summary{list-style:none;width:40px;height:40px;border:1px solid rgba(215,181,106,.28);display:grid;place-items:center;background:rgba(7,8,11,.25);backdrop-filter:blur(8px)}
.menu summary::-webkit-details-marker{display:none}
.hamb,.hamb::before,.hamb::after{display:block;width:14px;height:1px;background:#fff;content:"";position:relative}
.hamb::before{position:absolute;top:-4px}.hamb::after{position:absolute;top:4px}
.menu nav{position:absolute;top:48px;left:18px;min-width:150px;padding:6px;display:grid;background:rgba(8,9,12,.94);border:1px solid rgba(215,181,106,.22)}
.menu nav{opacity:0;pointer-events:none;transform:translateY(-6px);transition:.16s ease}
.menu[open] nav{opacity:1;pointer-events:auto;transform:none}
.menu nav a{text-decoration:none;padding:10px 12px;font-size:13px;font-weight:400}

.mark{position:absolute;z-index:5;top:calc(58px + var(--safe-t));left:50%;transform:translateX(-50%);width:min(28vw,112px);animation:in .9s .15s both}
.mark img{width:100%;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}

.dock{position:absolute;z-index:6;left:20px;right:20px;bottom:calc(18px + var(--safe-b));text-align:center;animation:in .9s .25s both}
.founder{font-size:22px;font-weight:500;letter-spacing:.02em;text-shadow:0 8px 24px #000}
.role{margin-top:4px;font-size:10px;font-weight:400;letter-spacing:.28em;color:var(--gold)}
.tag{margin-top:10px;font-size:12px;font-weight:400;color:rgba(243,234,214,.82)}
.clock{display:flex;justify-content:center;gap:18px;margin-top:16px;direction:ltr}
.clock div{min-width:44px}
.clock b{display:block;font-size:18px;font-weight:500;font-variant-numeric:tabular-nums}
.clock i{display:block;margin-top:3px;font-style:normal;font-size:9px;letter-spacing:.12em;color:var(--gold)}
.notify{display:flex;margin:16px auto 0;max-width:280px;border-bottom:1px solid rgba(215,181,106,.35)}
.notify input{flex:1;border:0;background:transparent;color:#fff;padding:10px 0;font:400 13px Dana,sans-serif;outline:none;text-align:right}
.notify input::placeholder{color:rgba(243,234,214,.4)}
.notify button{padding:10px 0 10px 8px;font-size:12px;font-weight:500;color:var(--gold);letter-spacing:.12em}

.panel{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:rgba(5,6,9,.7);backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transition:.3s ease}
.panel.is-open{opacity:1;visibility:visible;pointer-events:auto}
.panel-card{width:min(440px,calc(100vw - 40px));padding:28px 24px}
.panel-card h2{font-size:16px;font-weight:500;color:var(--gold);letter-spacing:.2em;margin-bottom:12px}
.panel-card p{font-size:14px;line-height:2;color:rgba(243,234,214,.8)}
.close-x{position:absolute;top:16px;left:18px;font-size:22px;color:var(--gold)}

@media (min-width:1024px) and (orientation:landscape){
  .plate{object-position:62% 28%}
  .mark{left:48px;transform:none;top:auto;bottom:calc(36px + var(--safe-b));width:96px}
  .dock{left:auto;right:48px;width:280px;text-align:left;bottom:calc(36px + var(--safe-b))}
  .clock{justify-content:flex-start}
  .notify{margin-left:0}
}

@media (max-height:680px){
  .mark{width:72px}
  .tag{display:none}
  .founder{font-size:18px}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}