:root{--ink:#f6e8cf;--bg:#07070c}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:none}
body{font-family:"IBM Plex Mono",ui-monospace,monospace;-webkit-font-smoothing:antialiased;touch-action:none}
a{color:inherit;text-decoration:none}

#scene{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block}

.top{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:max(22px,env(safe-area-inset-top)) clamp(18px,4vw,44px) 0;font-size:14px;letter-spacing:.02em;color:var(--ink);text-shadow:0 1px 14px rgba(6,6,11,.85)}
.mark{display:flex;align-items:center;gap:10px;font-weight:500}
.mail{opacity:.95;border-bottom:1px solid transparent;transition:border-color .2s,opacity .2s}
.mail:hover{opacity:1;border-color:currentColor}

.hero{position:fixed;left:clamp(18px,4vw,44px);right:clamp(18px,4vw,44px);top:clamp(80px,17vh,170px);color:var(--ink);text-shadow:0 2px 6px rgba(6,6,11,.5),0 2px 40px rgba(6,6,11,.7);pointer-events:none}
h1{font:400 clamp(40px,7.4vw,116px)/.96 "Instrument Serif",Georgia,serif;letter-spacing:-.025em}
h1 em{font-style:italic}

.clock{position:fixed;right:clamp(18px,4vw,44px);bottom:calc(max(18px,env(safe-area-inset-bottom)) + 44px);
  display:flex;gap:14px;align-items:baseline;font-size:13px;color:var(--ink);opacity:.92;letter-spacing:.04em;text-shadow:0 1px 10px rgba(6,6,11,.85)}
.clock b{font-weight:500;font-variant-numeric:tabular-nums}

.legal{position:fixed;left:0;right:0;bottom:0;padding:0 clamp(18px,4vw,44px) max(18px,env(safe-area-inset-bottom));
  font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--ink);opacity:.85;text-shadow:0 1px 10px rgba(6,6,11,.9)}

@media (max-width:640px){
  .clock{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 62px)}
  .hero{top:clamp(76px,14vh,120px)}
}
@media (max-width:380px){
  .clock{bottom:calc(max(18px,env(safe-area-inset-bottom)) + 96px)}
}