:root {
  --night: #0b1647;
  --cobalt: #2b42c8;
  --ivory: #f7f2ea;
  --silver: #c7d3ec;
  --mono: 'DM Mono', ui-monospace, Consolas, monospace;
  --serif: 'EB Garamond', Georgia, serif;
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ivory); -webkit-font-smoothing: antialiased; }
::selection { background: var(--ivory); color: var(--night); }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ivory); outline-offset: 7px; }
.skip-link { position: absolute; top: -100px; left: 18px; z-index: 20; padding: 10px 14px; background: var(--ivory); color: var(--night); font: 12px var(--mono); }
.skip-link:focus { top: 18px; }

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 100svh;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(5,10,35,.30), rgba(9,17,58,.06) 70%), url('./assets/backgrounds/nocturne-stars.png') center / cover no-repeat, #0a1030;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 65% 0 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(5,12,43,.38));
}

.copy {
  position: relative;
  z-index: 3;
  align-self: center;
  width: min(63%, 870px);
  padding: 0 0 13vh clamp(24px, 5vw, 78px);
  text-shadow: 0 2px 18px rgba(5,12,42,.45);
}
.title-lockup { display: flex; align-items: baseline; gap: clamp(12px, 1.5vw, 22px); margin: 0 0 clamp(34px, 5vh, 55px); }
h1 {
  margin: 0;
  font: italic 400 clamp(7rem, 14vw, 15rem)/.8 var(--serif);
  letter-spacing: -.075em;
  white-space: nowrap;
}
.phi { display: inline-block; font-size: .72em; letter-spacing: -.12em; vertical-align: .1em; }
.limited { color: #d4def3; font: italic 500 clamp(18px, 2vw, 28px)/1 var(--serif); letter-spacing: -.025em; white-space: nowrap; }
.dictionary {
  max-width: 690px;
  margin: 0;
  color: #d1d9ed;
  font: 400 clamp(12px, 1.05vw, 16px)/1.8 var(--mono);
  letter-spacing: .015em;
}
.service-line { max-width: 520px; margin: clamp(26px, 4vh, 42px) 0 0; color: #edf0f9; font: 400 clamp(25px, 2.35vw, 36px)/1.16 var(--serif); letter-spacing: -.025em; }

.art { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.tree-wrap {
  position: absolute;
  z-index: 2;
  right: 2vw;
  bottom: 3vh;
  width: min(50vw, 620px);
  aspect-ratio: 620 / 680;
  filter: drop-shadow(0 0 24px rgba(219,232,255,.2));
}
.tree-wrap canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#tree-interaction { pointer-events: auto; touch-action: pan-y; }
.orbit {
  position: absolute;
  z-index: 1;
  left: 75%;
  top: 42%;
  width: 38%;
  aspect-ratio: 1;
  border: 1px dashed rgba(211,225,255,.23);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-28deg) scaleY(.48);
  animation: orbitA 34s linear infinite;
}
.orbit-b { width: 28%; border-color: rgba(211,225,255,.17); transform: translate(-50%,-50%) rotate(38deg) scaleY(.6); animation: orbitB 28s linear infinite reverse; }
.star { position: absolute; z-index: 1; width: 4px; height: 4px; background: #f6f9ff; box-shadow: 0 0 10px #dce8ff; }
.star-one { left: 58%; top: 14%; }
.star-two { left: 86%; top: 21%; }
.star-three { right: 9%; top: 54%; }
.star-four { left: 52%; top: 66%; }

.signature {
  position: absolute;
  z-index: 4;
  left: clamp(24px, 5vw, 78px);
  bottom: clamp(24px, 4vh, 42px);
  display: flex;
  align-items: baseline;
  gap: clamp(28px, 4vw, 68px);
  text-shadow: 0 2px 18px rgba(3,8,35,.85);
}
.identity { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.identity strong { font: italic 500 clamp(23px, 2vw, 30px)/1 var(--serif); letter-spacing: -.025em; }
.identity span { color: #b6c5e9; font: 400 10px/1.4 var(--mono); letter-spacing: .03em; }
.signature a {
  font: 400 12px/1.4 var(--mono);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
}
.signature a:hover { text-decoration: underline; text-underline-offset: 5px; }
.signature a span { margin-left: 6px; font-size: 15px; }
.identity strong a { font: inherit; letter-spacing: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

@keyframes orbitA { to { transform: translate(-50%,-50%) rotate(332deg) scaleY(.48); } }
@keyframes orbitB { to { transform: translate(-50%,-50%) rotate(398deg) scaleY(.6); } }

@media (max-width: 850px) {
  .hero { min-height: max(100svh, 780px); }
  .copy { align-self: start; width: 100%; padding: clamp(72px, 10vh, 110px) 24px 0; }
  .title-lockup { margin-bottom: 33px; }
  h1 { font-size: clamp(6rem, 17vw, 10rem); }
  .limited { font-size: 20px; }
  .dictionary { max-width: 235px; font-size: 12px; text-shadow: 0 1px 12px rgba(5,11,40,.95); }
  .service-line { max-width: 235px; margin-top: 30px; font-size: 27px; text-shadow: 0 1px 12px rgba(5,11,40,.95); }
  .tree-wrap { width: min(72vw, 500px); right: -10vw; bottom: 6vh; }
  .orbit { left: 73%; top: 57%; }
  .orbit { width: 78%; }
  .orbit-b { width: 56%; }
  .signature { display: grid; gap: 10px; }
  .signature a { font-size: 11px; }
}
@media (max-width: 470px) {
  .hero { min-height: max(100svh, 760px); }
  .copy { padding: clamp(60px, 8vh, 82px) 22px 0; }
  .title-lockup { gap: 10px; margin-bottom: 30px; }
  h1 { font-size: clamp(5.2rem, 22vw, 7.2rem); }
  .limited { font-size: 17px; }
  .dictionary { max-width: 350px; font-size: 11.5px; }
  .service-line { max-width: 280px; margin-top: 28px; font-size: 23px; }
  .tree-wrap { width: min(92vw, 360px); right: -72px; bottom: clamp(45px, 8vh, 75px); }
  .orbit { left: 72%; top: 60%; }
  .orbit { width: 92%; }
  .orbit-b { width: 65%; }
  .signature { left: 22px; bottom: clamp(25px, 5vh, 42px); gap: 10px; }
  .identity strong { font-size: 22px; }
  .identity span { font-size: 9px; }
  .signature a { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #tree-interaction { pointer-events: none; }
}
@media print {
  body { background: #fff; color: #111; }
  .hero { min-height: 0; background: #fff; }
  .hero::before, .hero::after, .art { display: none; }
  .copy { width: 100%; padding: 80px 30px 120px; text-shadow: none; }
  .limited, .dictionary, .service-line, .identity span { color: #222; }
  .signature { position: static; padding: 0 30px 40px; color: #111; text-shadow: none; }
}