:root {
  color-scheme: dark;
  --ink: #090c11;
  --silver: #e7edf5;
  --blue: #8bd9ff;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ink); }
body { margin: 0; color: var(--silver); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
.page { min-height: 100svh; padding-bottom: 104px; position: relative; overflow: clip; background: var(--ink); display: flex; flex-direction: column; }
.masthead { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; margin-inline: 3.5vw; }
.masthead { height: 104px; flex-shrink: 0; border-bottom: 1px solid #d9e9ff19; }
.monogram { width: 45px; height: 45px; }
.domain { font-family: 'Courier New', monospace; font-size: 12px; letter-spacing: .14em; padding: 15px 0 15px 15px; }
.domain span { color: var(--blue); margin-left: 16px; font-size: 18px; }
main { position: relative; flex: 1; min-height: 440px; display: grid; place-items: center; isolation: isolate; }
.ambient { position: absolute; width: 85vw; height: 85%; left: 7.5vw; top: 7.5%; background: radial-gradient(ellipse, #19304d70, #0c131e38 48%, transparent 70%); z-index: -3; }
.artwork { position: absolute; height: min(84vw, 920px); width: min(84vw, 920px); left: 50%; top: 50%; transform: translate(-50%, -50%) translate(var(--art-x, 0px), var(--art-y, 0px)); z-index: -1; pointer-events: none; transition: transform 1.8s cubic-bezier(.16,1,.3,1); }
.lightfield { width: 100%; height: 100%; background: linear-gradient(135deg, transparent 20%, #1f3c791a 34%, #30639f55 46%, #80bde72b 51%, #192c5722 61%, transparent 75%); filter: blur(45px); animation: drift 16s ease-in-out infinite alternate; }
.grid { position: absolute; inset: 0; background-image: linear-gradient(#bedcff08 1px, transparent 1px), linear-gradient(90deg, #bedcff08 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(ellipse, black, transparent 70%); z-index: -2; pointer-events: none; }
.identity { width: 85vw; max-width: 1480px; position: relative; padding-block: 48px; transform: translate(var(--name-x,0px), var(--name-y,0px)); transition: transform 1.8s cubic-bezier(.16,1,.3,1); }
h1 { margin: 0; font-weight: 900; font-size: clamp(5rem,15.4vw,17rem); line-height: .92; letter-spacing: -.065em; }
.name { display: block; width: max-content; max-width: 100%; position: relative; color: #e0e8f1; background: linear-gradient(172deg, #fff 4%, #eff5fc 25%, #aec0d4 40%, #f2f7ff 46%, #6c7e92 48%, #c8d5e7 55%, #fafcff 73%, #98aac1 94%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 #1b2e42) drop-shadow(0 12px 28px #0008); animation: reveal 1.4s cubic-bezier(.16,1,.3,1) both; }
.first { margin-left: 1%; }
.last { margin-left: auto; margin-top: .08em; animation-delay: .1s; }
.edge-mark { position: absolute; font: 300 23px 'Courier New', monospace; color: #8193a7; top: 50%; }
.mark-left { left: 3.5vw; }
.mark-right { right: 3.5vw; }
a:focus-visible { outline: 1px solid var(--blue); outline-offset: 6px; }
.domain:hover { color: white; }
@keyframes reveal { from { opacity: 0; transform: translateY(30px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes drift { from { transform: rotate(-7deg) scale(.98); } to { transform: rotate(7deg) scale(1.05); } }
@media (min-width: 1700px) { .identity { width: 80vw; } }
@media (max-width: 650px) {
  .page { padding-bottom: 88px; }
  .masthead { margin-inline: 24px; }
  .masthead { height: 88px; }
  .monogram { width: 40px; height: 40px; }
  .domain { font-size: 12px; letter-spacing: .07em; }
  .domain span { margin-left: 7px; }
  main { min-height: 410px; }
  .identity { width: 88vw; padding-block: 64px; }
  h1 { font-size: 18.5vw; line-height: 1.08; letter-spacing: -.07em; }
  .first { margin-left: 0; }
  .last { margin-top: 0; }
  .artwork { width: 140vw; height: 140vw; }
  .edge-mark { top: auto; bottom: 44px; font-size: 18px; }
  .mark-left { left: 24px; }
  .mark-right { right: 24px; }
}
@media (max-height: 550px) and (min-width: 651px) {
  .page { padding-bottom: 70px; }
  .masthead { height: 70px; }
  main { min-height: 320px; }
  .identity { width: 65vw; padding-block: 24px; }
  h1 { font-size: 11vw; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .artwork { transform: translate(-50%,-50%); }
  .identity { transform: none; }
}