@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Work+Sans:ital,wght@0,300..700;1,300..700&display=swap");

:root {
  --paper: #f4efe3;
  --ink: #191817;
  --sun: #f2c94c;
  --contact: #c84a3a;
  --essay-1: #3f72af;
  --essay-2: #4f8a5b;
  --project-1: #d98236;
  --project-2: #7563a8;
  --archive: #c96a83;
  --photos: #6f8795;

  --focus-x: 29.2%;
  --focus-y: 60%;
  --sun-size: clamp(175px, 18vw, 235px);

  --display-font: "Instrument Serif", Georgia, serif;
  --body-font: "Work Sans", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--body-font);
  background:
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.42), transparent 28%),
    radial-gradient(circle at 78% 72%, rgba(200,74,58,.055), transparent 31%),
    var(--paper);
}

.solar-system,
.system-stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.paper-atmosphere {
  position: fixed;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  opacity: .20;
  background:
    radial-gradient(circle at 10% 20%, rgba(25,24,23,.08) 0 .7px, transparent 1px),
    radial-gradient(circle at 70% 40%, rgba(25,24,23,.06) 0 .6px, transparent 1px),
    radial-gradient(circle at 35% 80%, rgba(25,24,23,.055) 0 .8px, transparent 1px);
  background-size: 19px 23px, 27px 31px, 37px 29px;
  animation: paper-drift 18s steps(6,end) infinite;
  mix-blend-mode: multiply;
}

.site-signature {
  position: fixed;
  top: 22px;
  left: 27px;
  z-index: 80;
  width: clamp(120px,12vw,180px);
  transform: rotate(-4deg);
}
.site-signature img { display: block; width: 100%; }

.sun {
  position: absolute;
  left: var(--focus-x);
  top: var(--focus-y);
  z-index: 40;
  width: var(--sun-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  text-decoration: none;
  transform: translate(-50%,-50%);
  box-shadow:
    0 0 0 1px rgba(25,24,23,.10),
    0 0 28px rgba(242,201,76,.34),
    0 0 72px rgba(242,201,76,.18);
}

.sun::before,
.sun::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.sun::before {
  inset: -13%;
  z-index: -1;
  background: radial-gradient(circle, rgba(242,201,76,.20), transparent 68%);
}
.sun::after {
  inset: -4%;
  border: 1px solid rgba(242,201,76,.32);
  animation: sun-breathe 4.5s ease-in-out infinite;
}

.sun__sos {
  font: 400 calc(var(--sun-size) * .34)/1 var(--display-font);
  letter-spacing: -.045em;
  white-space: nowrap;
  transform: rotate(12deg);
}

.sun-hover-label {
  position: absolute;
  left: var(--focus-x);
  top: calc(var(--focus-y) + var(--sun-size)/2 + 14px);
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  font: clamp(15px,1.5vw,21px)/1 var(--display-font);
  transform: translate(-50%,-7px) rotate(-3deg);
  transition: opacity .18s ease, transform .22s ease, visibility 0s linear .18s;
}
.sun:hover + .sun-hover-label,
.sun:focus-visible + .sun-hover-label {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%,0) rotate(-3deg);
  transition-delay: 0s;
}

.orbit-map,
.asteroid-belt,
.planet-layer {
  position: absolute;
  inset: 0;
}
.orbit-map {
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.orbit-line {
  fill: none;
  stroke: rgba(25,24,23,.18);
  stroke-width: 1.15;
  stroke-dasharray: 2 8;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .8;
}
.asteroid-belt { z-index: 5; pointer-events: none; }
.asteroid {
  position: absolute;
  width: var(--asteroid-size);
  height: var(--asteroid-size);
  border-radius: 50%;
  background: var(--ink);
  opacity: var(--asteroid-opacity);
  will-change: transform;
}
.planet-layer { pointer-events: none; }

.planet {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--planet-size);
  height: var(--planet-size);
  color: var(--ink);
  text-decoration: none;
  pointer-events: auto;
  isolation: isolate;
  will-change: transform;
}

.planet__body {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--planet-color);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.09), 0 2px 7px rgba(25,24,23,.10);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.planet__art {
  position: relative;
  z-index: 5;
  width: 58%;
  height: 58%;
  object-fit: contain;
  pointer-events: none;
  transition: transform .18s ease;
}

.planet:hover .planet__body,
.planet.is-hovered .planet__body,
.planet:focus-visible .planet__body,
.planet.is-selected .planet__body {
  transform: scale(1.08);
  filter: saturate(1.08) brightness(1.05);
  box-shadow: inset 0 -4px 8px rgba(0,0,0,.08), 0 4px 16px rgba(25,24,23,.15);
}
.planet:hover .planet__art,
.planet.is-hovered .planet__art,
.planet:focus-visible .planet__art,
.planet.is-selected .planet__art {
  transform: scale(1.08) rotate(-4deg);
}

.planet__annotation {
  --hover-accent: var(--ink);
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: max-content;
  max-width: min(180px,42vw);
  display: grid;
  gap: 3px;
  text-align: center;
  font: 16px/1.08 var(--display-font);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%,-4px) rotate(-2deg);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.planet__annotation strong {
  color: var(--ink);
  font: 600 10px/1 var(--body-font);
  letter-spacing: .065em;
}
.planet__annotation > span {
  color: var(--hover-accent);
  font-size: 1.5em;
}
.planet.is-selected .planet__annotation {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%,0) rotate(-2deg);
  transition-delay: 0s;
}

.planet--contact  .planet__annotation { --hover-accent: var(--contact); }
.planet--essay1   .planet__annotation { --hover-accent: var(--essay-1); }
.planet--essay2   .planet__annotation { --hover-accent: var(--essay-2); }
.planet--project1 .planet__annotation { --hover-accent: var(--project-1); }
.planet--project2 .planet__annotation { --hover-accent: var(--project-2); }
.planet--archive  .planet__annotation { --hover-accent: var(--archive); }
.planet--photos   .planet__annotation { --hover-accent: var(--photos); }

.planet-hover-overlay {
  position: fixed;
  z-index: 9500;
  width: max-content;
  max-width: min(800px,80vw);
  display: grid;
  gap: 3px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  font: 16px/1.08 var(--display-font);
  transform: translateY(-50%) translateX(-4px) rotate(-3deg);
  transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}
.planet-hover-overlay strong {
  color: var(--ink);
  font: 600 10px/1 var(--body-font);
  letter-spacing: .065em;
}
.planet-hover-overlay > span {
  max-width: min(800px,80vw);
  color: var(--hover-accent);
  font-size: 1.5em;
}
.planet-hover-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) rotate(-3deg);
  transition-delay: 0s;
}
.planet-hover-overlay.is-left {
  text-align: right;
  transform: translate(-100%,-50%) translateX(4px) rotate(3deg);
}
.planet-hover-overlay.is-left.is-visible {
  transform: translate(-100%,-50%) rotate(3deg);
}

.moon-layer,
.rings {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.moon-layer { z-index: 4; }
.moon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--moon-size);
  height: var(--moon-size);
  border-radius: 50%;
  background: rgba(25,24,23,.78);
}

.planet--project2 .rings { z-index: 2; }
.ring-back,
.ring-front {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 160%;
  height: 42%;
  border: 5px solid var(--project-2);
  border-radius: 50%;
  transform: translate(-50%,-50%) rotate(-14deg);
}
.ring-back { z-index: 1; clip-path: inset(0 0 50% 0); opacity: .72; }
.ring-front { z-index: 7; clip-path: inset(50% 0 0 0); opacity: .92; }

.planet.is-new::after {
  content: "";
  position: absolute;
  inset: -20%;
  border: 1px solid currentColor;
  border-radius: 50%;
  opacity: 0;
  animation: new-world 2.2s ease-out 2;
}

.explorer-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  width: 27px;
  height: 27px;
  pointer-events: none;
  will-change: transform;
}
.explorer-cursor img { display: block; width: 100%; height: 100%; }

.skip-entry-loader .site-loader { display: none !important; }

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: opacity .52s ease, visibility 0s linear .52s;
}
.site-loader.is-leaving {
  opacity: 0;
  visibility: hidden;
}
.site-loader__inner {
  width: min(560px,100%);
  display: grid;
  justify-items: center;
  text-align: center;
}
.site-loader__logo {
  width: clamp(150px,23vw,235px);
  margin-bottom: clamp(22px,4vw,38px);
}
.site-loader__thought {
  margin: 0;
  font: clamp(30px,5vw,54px)/1.02 var(--display-font);
  letter-spacing: -.03em;
}
.site-loader__fields {
  margin: 14px 0 0;
  font-size: clamp(11px,1.35vw,14px);
  font-weight: 500;
  letter-spacing: .045em;
}
.site-loader__fields span { margin: 0 .45em; opacity: .48; }

.site-loader__mini-system {
  position: relative;
  width: 230px;
  height: 190px;
  margin: clamp(25px,4vw,38px) 0 15px;
  overflow: visible;
  transform-origin: 50% 50%;
}
.site-loader__loader-sun,
.site-loader__mini-planet {
  z-index: 3;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  will-change: transform, width, height, left, top;
}
.site-loader__loader-sun {
  width: 52px;
  height: 52px;
  z-index: 2;
  display: grid;
  place-items: center;
  background: var(--sun);
  transform: translate(-50%,-50%);
}

.site-loader__mini-planet {
  z-index: 3;
  background: var(--mini-color);
  transform: translate(-50%,-50%);
}

.site-loader__status {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  opacity: .66;
}
.site-loader__enter {
  appearance: none;
  border: 0;
  padding: 5px 8px;
  background: transparent;
  color: var(--ink);
  font: 550 13px/1.2 var(--body-font);
  letter-spacing: .045em;
  cursor: pointer;
}
.site-loader__enter::after {
  content: " ↗";
  display: inline-block;
  transition: transform .15s ease;
}
.site-loader__enter:hover::after,
.site-loader__enter:focus-visible::after { transform: translate(2px,-2px); }
.site-loader__enter:focus-visible { outline: 1px dashed var(--ink); outline-offset: 5px; }
.site-loader__keyhint {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 400;
  opacity: .48;
}

@keyframes paper-drift {
  0%,100% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-1%,.5%,0); }
  50% { transform: translate3d(.5%,-.7%,0); }
  75% { transform: translate3d(.8%,.3%,0); }
}
@keyframes sun-breathe {
  0%,100% { transform: scale(.98); opacity: .45; }
  50% { transform: scale(1.03); opacity: .85; }
}
@keyframes new-world {
  0% { transform: scale(.72); opacity: .85; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (min-width: 701px) {
  html, body, body * { cursor: none !important; }
  .planet:hover .planet__annotation,
  .planet.is-hovered .planet__annotation,
  .planet:focus-visible .planet__annotation {
    opacity: 0 !important;
    visibility: hidden !important;
  }
}

@media (max-width: 700px) {
  :root {
    --focus-x: 50%;
    --focus-y: 60%;
    --sun-size: 88px;
  }

  body { cursor: auto; }
  .explorer-cursor,
  .planet-hover-overlay { display: none; }

  .site-signature {
    top: 17px;
    left: 18px;
    width: 128px;
  }

  .orbit-line {
    stroke-width: .72;
    stroke-dasharray: 1.5 8;
    opacity: .47;
  }

  .sun-hover-label {
    top: calc(var(--focus-y) + var(--sun-size)/2 + 9px);
    font-size: 13px;
  }

  .planet.is-selected { z-index: 100 !important; }

  .site-loader { padding: 22px; }
  .site-loader__logo { width: 155px; }
  .site-loader__thought { font-size: clamp(30px,10vw,44px); }
  .site-loader__fields { max-width: 290px; }
  .site-loader__orbit { width: 170px; height: 88px; }
  .site-loader__enter { font-size: 14px; padding: 8px 10px; }
  .site-loader__keyhint { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .paper-atmosphere,
  .sun::after,
  .planet.is-new::after,
  .site-loader__loader-planet { animation: none; }
  .site-loader { transition-duration: .12s; }
}