:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.84);
  --pad-v: clamp(12px, 2.4vmin, 28px);

  --fade:420ms;
  --fade-fast:240ms;
  --cross:260ms;
  --height-dur:260ms;

  --sel-bg:#000;
  --sel-fg:#fff;

  --oil-dim-closed: 0;
  --oil-dim-open: .28;
}

@font-face{
  font-family:"Neue Haas Unica Pro";
  src:url("./Neue Haas Unica Pro.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

html,body{height:100%;}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:400 16px/1.5 "Neue Haas Unica Pro",ui-sans-serif,system-ui;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a {
  text-decoration: underline !important;
}
::selection{background:var(--sel-bg);color:var(--sel-fg);}
::-moz-selection{background:var(--sel-bg);color:var(--sel-fg);}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer; text-decoration: underline;}
img{display:block;max-width:100%;height:auto;}

/* OIL BACKGROUND */
#blend-root{position:fixed;inset:0;z-index:0;}
#oil-bg{position:absolute;inset:0;pointer-events:none;}
#oil-bg canvas{position:absolute;inset:0;display:block;}
#oil-bg::after{
  content:"";position:absolute;inset:0;background:#000;
  opacity:var(--oil-dim-closed);
  transition:opacity var(--fade) ease;
}
body.is-open #oil-bg::after{opacity:var(--oil-dim-open);}

/* CORNERS */
.chrome{position:fixed;inset:0;pointer-events:none;z-index:500;}
.slot{position:absolute;padding:var(--pad-v);letter-spacing:.02em;pointer-events:auto;user-select:none;}
.top-left{top:0;left:0;}
.top-right{top:0;right:0;}
.top-center{top:0;left:50%;transform:translateX(-50%);}
.bot-left{bottom:0;left:0;color:var(--muted);}
.bot-right{bottom:0;right:0;}
.bot-center{bottom:0;left:50%;transform:translateX(-50%);}
.nav-link{opacity:.92;transition:opacity .2s;}
.nav-link:hover{opacity:1;}

/* LOGO */
.stage{position:absolute;inset:0;display:grid;place-items:center;}
.logo-wrap{transition:opacity var(--fade) ease;}
.logo{
  width:min(72vw,720px);
  mix-blend-mode:difference;
  filter:brightness(0) invert(1);
}
body.is-open .logo-wrap{opacity:0;pointer-events:none;}

/* OVERLAY */
.overlay{
  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.8); /* your current value */
  opacity:0;pointer-events:none;transition:opacity var(--fade) ease;
  z-index:400;
}
body.is-open .overlay{opacity:1;pointer-events:auto;}
.dialog{
  width:min(880px,88vw);max-height:90vh;overflow:hidden;background:transparent;
  color:#fff;border-radius:24px;padding:clamp(18px,3.2vmin,32px);
  filter:blur(3px);opacity:0;transform:translateY(6px) scale(.985);
  animation:dialogIn var(--fade) cubic-bezier(.22,.72,.12,1) forwards;
}
@keyframes dialogIn{to{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}}

/* PANELS */
.stack{position:relative;transition:height var(--height-dur) ease;}
.stack.scrolling{overflow:auto;max-height:calc(90vh - clamp(18px,3.2vmin,32px)*2);}
.panel{position:absolute;inset:0;opacity:0;pointer-events:none;}
.panel.is-active{position:relative;opacity:1;pointer-events:auto;}
.panel.entering{animation:crossIn var(--cross) ease forwards;}
.panel.leaving{animation:crossOut var(--cross) ease forwards;}
@keyframes crossIn{from{opacity:0;filter:blur(3px);transform:translateY(4px);}to{opacity:1;filter:blur(0);transform:translateY(0);}}
@keyframes crossOut{from{opacity:1;filter:blur(0);transform:translateY(0);}to{opacity:0;filter:blur(3px);transform:translateY(-2px);}}

/* TYPE */
.panel h2{font-weight:600;font-size:clamp(18px,3.2vmin,28px);margin:0 0 .8em;opacity:0;transform:translateY(6px);}
.panel p,.panel .email-foot{opacity:0;transform:translateY(8px);color:var(--muted);animation:fadeUp .8s ease forwards;}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}
.email-foot{display:inline-block;margin-top:1.1rem;font-weight:500;color:#fff;transition:filter .25s ease,opacity .25s ease;}
.email-foot:hover{filter:drop-shadow(0 0 10px rgba(45,107,255,.55));}

/* CLOCK */
#clock{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--muted);}

/* REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .logo-wrap,.overlay,.dialog,.panel,.panel p,.panel h2,.stack{
    transition:none!important;animation:none!important;filter:none!important;
  }
}