.entry-gate[hidden],
.entry-gate [hidden] { display: none !important; }
.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(20px, 3.5vh, 42px) 24px 24px;
  box-sizing: border-box;
  overflow: hidden;
  color: #111;
  background: #fff;
  opacity: 1;
  transition: opacity 200ms ease;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.entry-gate.is-leaving { opacity: 0; pointer-events: none; }
body.entry-open { overflow: hidden; }
body.entry-open,
body.entry-open * { cursor: auto !important; }
body.entry-open button { cursor: pointer !important; }
body.entry-open #art-cursor { visibility: hidden !important; }
.entry-title {
  position: relative;
  z-index: 4;
  margin: 0;
  width: min(52vw, 600px);
  font-size: inherit;
  line-height: 1;
}
.entry-title img { display: block; width: 100%; height: auto; }
.entry-stage {
  position: relative;
  display: grid;
  place-items: center;
  align-self: stretch;
  width: min(1120px, 100%);
  min-height: 0;
  isolation: isolate;
}
.entry-portrait-frame {
  position: relative;
  width: min(42vw, 37.5svh, 390px);
  aspect-ratio: 3 / 4;
  margin: 0;
}
.entry-portrait {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  animation: none;
  transform: none;
  /* The source is already black and white. The photograph never animates. */
}
.entry-adaptivity {
  position: absolute;
  z-index: 3;
  left: 9%;
  bottom: 8.5%;
  width: 82%;
  height: auto;
  filter: invert(1);
}
.entry-orbits {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(112%, 1180px);
  height: 115%;
  overflow: visible;
  transform: translate(-50%, -50%);
  pointer-events: none;
  fill: none;
  stroke: #141414;
  stroke-width: .7;
  stroke-opacity: .5;
}
.entry-orbit {
  transform-box: view-box;
  transform-origin: 500px 375px;
  transform: rotate(var(--entry-from));
  animation: entry-line-drift var(--entry-duration, 96s) ease-in-out infinite alternate;
  animation-delay: var(--entry-delay, 0s);
}
.entry-orbit ellipse { vector-effect: non-scaling-stroke; }

.entry-gate.is-still .entry-orbit,
.motion-paused .entry-orbit { animation-play-state: paused; }
.entry-controls {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 10px;
}
.entry-enter,
.entry-motion {
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font: inherit;
}
.entry-enter { padding: 8px 16px; font-size: 17px; letter-spacing: .01em; }
.entry-enter span { display: inline-block; margin-left: 10px; }
.entry-key-hint { color: #666; font-size: 11px; }
.entry-motion { min-height: 32px; padding: 5px 10px; color: #666; font-size: 11px; }
.entry-motion:disabled { cursor: default !important; }
.entry-enter:focus-visible,
.entry-motion:focus-visible { outline: 1px solid #111; outline-offset: 4px; }
@media (max-width: 640px) {
  .entry-gate { padding: 24px 16px 16px; }
  .entry-title { width: min(82vw, 460px); }
  .entry-portrait-frame { width: min(70vw, 40svh, 340px); }
  .entry-orbits { width: 160%; height: 125%; stroke-opacity: .42; }
  .entry-key-hint { display: none; }
}
@media (max-height: 540px) and (min-width: 641px) {
  .entry-gate { padding-block: 12px; }
  .entry-title { width: min(34vw, 340px); }
  .entry-portrait-frame { width: min(27svh, 220px); }
  .entry-controls { gap: 1px; padding-top: 0; }
  .entry-key-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .entry-gate { transition: none; }
  .entry-orbit { animation: none !important; transform: rotate(var(--entry-from)); }
}

/* A still portrait inside a field of responsive, living lines. */
.entry-orbits{transform:translate(calc(-50% + var(--entry-x,0px)),calc(-50% + var(--entry-y,0px)));transition:transform 3.2s cubic-bezier(.25,.1,.25,1);stroke-opacity:.48}
@keyframes entry-line-drift {
  from { transform: rotate(var(--entry-from)); }
  to { transform: rotate(var(--entry-to)); }
}
.entry-enter{position:relative;width:90px;height:90px;display:grid;place-items:center;padding:0;font-size:14px;margin-bottom:4px}
.entry-enter-ring{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.7;stroke-dasharray:235 60;transform:rotate(-65deg);transition:transform .8s cubic-bezier(.16,1,.3,1),stroke-dasharray .8s}
.entry-enter:hover .entry-enter-ring,.entry-enter:focus-visible .entry-enter-ring{transform:rotate(115deg);stroke-dasharray:295 0}
.entry-enter-label{position:relative;display:block;transition:translate .5s}
.entry-enter:hover .entry-enter-label{translate:0 -2px}
.entry-enter span span{margin-left:5px}
.entry-enter:focus-visible{outline:none;border-radius:50%;text-decoration:underline;text-underline-offset:5px}
.entry-gate{transition:opacity .6s ease}
.entry-gate.is-leaving .entry-orbits{transform:translate(-50%,-50%) scale(1.15);opacity:0;transition:transform .65s ease-out,opacity .5s ease}
.entry-gate.is-leaving .entry-portrait-frame{opacity:0;transition:opacity .5s ease .08s}
@media(max-width:640px){.entry-enter{width:72px;height:72px;font-size:12px}.entry-orbits{width:170%;height:120%}.entry-controls{gap:5px}}
@media(max-height:540px){.entry-enter{height:52px;width:52px;font-size:10px}.entry-controls{gap:0}.entry-motion{min-height:25px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.entry-orbits{transform:translate(-50%,-50%);transition:none}.entry-enter-ring,.entry-enter-label{transition:none}.entry-gate.is-leaving .entry-orbits{transform:translate(-50%,-50%);transition:none}.entry-gate.is-leaving .entry-portrait-frame{transition:none}}
.entry-orbit-1{--entry-from:-45deg;--entry-to:-46.75deg;--entry-duration:279s;--entry-delay:-21s;}
.entry-orbit-2{--entry-from:-8deg;--entry-to:-6deg;--entry-duration:318s;--entry-delay:-42s;}
.entry-orbit-3{--entry-from:29deg;--entry-to:26.75deg;--entry-duration:357s;--entry-delay:-63s;}
.entry-orbit-4{--entry-from:66deg;--entry-to:67.5deg;--entry-duration:273s;--entry-delay:-84s;}
.entry-orbit-5{--entry-from:-55deg;--entry-to:-56.75deg;--entry-duration:312s;--entry-delay:-105s;}
.entry-orbit-6{--entry-from:-18deg;--entry-to:-16deg;--entry-duration:351s;--entry-delay:-126s;}
.entry-orbit-7{--entry-from:19deg;--entry-to:16.75deg;--entry-duration:267s;--entry-delay:-147s;}
.entry-orbit-8{--entry-from:56deg;--entry-to:57.5deg;--entry-duration:306s;--entry-delay:-18s;}
.entry-orbit-9{--entry-from:-65deg;--entry-to:-66.75deg;--entry-duration:345s;--entry-delay:-39s;}
.entry-orbit-10{--entry-from:-28deg;--entry-to:-26deg;--entry-duration:261s;--entry-delay:-60s;}
.entry-orbit-11{--entry-from:9deg;--entry-to:6.75deg;--entry-duration:300s;--entry-delay:-81s;}
.entry-orbit-12{--entry-from:46deg;--entry-to:47.5deg;--entry-duration:339s;--entry-delay:-102s;}
.entry-orbit-13{--entry-from:-75deg;--entry-to:-76.75deg;--entry-duration:255s;--entry-delay:-123s;}
.entry-orbit-14{--entry-from:-38deg;--entry-to:-36deg;--entry-duration:294s;--entry-delay:-144s;}
.entry-orbit-15{--entry-from:-1deg;--entry-to:-3.25deg;--entry-duration:333s;--entry-delay:-15s;}
.entry-orbit-16{--entry-from:36deg;--entry-to:37.5deg;--entry-duration:249s;--entry-delay:-36s;}
.entry-orbit-17{--entry-from:73deg;--entry-to:71.25deg;--entry-duration:288s;--entry-delay:-57s;}
.entry-orbit-18{--entry-from:-48deg;--entry-to:-46deg;--entry-duration:327s;--entry-delay:-78s;}

/* Quiet invitation: a complete circle appears only on interaction. */
.entry-enter-ring{stroke-dasharray:none!important;transform:none!important;opacity:0;transition:opacity .35s ease}
.entry-enter:hover .entry-enter-ring{opacity:1}
.entry-enter:hover .entry-enter-label{translate:0 0}

#name[tabindex="-1"]:focus{outline:none}

/* Keep the drawing intact; only a barely perceptible collective drift. */
.entry-orbit{animation:none;transform:rotate(var(--entry-from))}
.entry-orbits{transform:translate(-50%,-50%);transition:none;animation:entry-quiet-drift 80s ease-in-out infinite alternate}
@keyframes entry-quiet-drift{from{transform:translate(-50%,-50%)}to{transform:translate(calc(-50% + 1px),calc(-50% - 1px))}}
.entry-gate.is-still .entry-orbits,.motion-paused .entry-orbits{animation-play-state:paused}
.entry-gate.is-leaving .entry-orbits{animation:none;transform:translate(-50%,-50%);transition:opacity .6s ease}
@media(prefers-reduced-motion:reduce){.entry-orbits{animation:none}}