:root {
  color-scheme: dark;
  --night: #040609;
  --ivory: #e6e2d7;
  --muted: #747d89;
  --gold: #d0bd80;
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { background: var(--night); color: var(--ivory); overflow: hidden; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a:focus-visible { outline: 1px solid var(--gold); outline-offset: 7px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.masthead { position: fixed; z-index: 3; top: max(32px, env(safe-area-inset-top)); left: max(44px, env(safe-area-inset-left)); }
.wordmark { font: 27px/1 Georgia, "Times New Roman", serif; letter-spacing: -.9px; }
.wordmark span { font-style: italic; color: var(--gold); }
main { position: fixed; inset: 0; }
#night { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; opacity: 0; transition: opacity 1.8s ease; }
body.ready #night { opacity: 1; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .025; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23noise)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.loading { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 9px; letter-spacing: 2px; color: var(--muted); white-space: nowrap; transition: opacity .35s ease; }
body.ready .loading { opacity: 0; pointer-events: none; }
.footer { position: fixed; z-index: 3; bottom: max(27px, env(safe-area-inset-bottom)); right: max(44px, env(safe-area-inset-right)); }
.contact { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #8e97a3; font-size: 10px; letter-spacing: .5px; transition: color .2s; }
.contact span { color: #d2c28f; font-size: 13px; }
.contact:hover { color: var(--ivory); }
.no-script { position: fixed; left: 24px; top: 45%; right: 24px; text-align: center; color: var(--muted); font-size: 12px; }
@media (max-width: 760px) {
  .masthead { top: max(25px, env(safe-area-inset-top)); left: max(23px, env(safe-area-inset-left)); }
  .wordmark { font-size: 25px; }
  .footer { right: max(23px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); }
  .contact { font-size: 9px; }
  .grain { display: none; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .masthead { top: max(17px, env(safe-area-inset-top)); }
  .footer { bottom: max(8px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  #night { transition: none; }
}