.sim-site-nav {
  --sim-nav-seat: 64px;
  --sim-nav-gap: clamp(10px, 1.5vw, 20px);
  --sim-nav-fg: #fff;
  --sim-nav-bg: #000;
  position: relative;
  z-index: 5;
  display: grid;
  justify-items: center;
  width: 100%;
  color: var(--sim-nav-fg);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.sim-site-nav-rail {
  display: grid;
  grid-template-columns: repeat(5, var(--sim-nav-seat));
  gap: var(--sim-nav-gap);
  justify-content: center;
  align-items: start;
}

.sim-site-nav-item {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--sim-nav-seat);
  height: var(--sim-nav-seat);
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 0;
  background: var(--sim-nav-bg);
  color: var(--sim-nav-fg);
  text-decoration: none;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}

.sim-site-nav-item:hover,
.sim-site-nav-item:focus-visible,
.sim-site-nav-item.is-lit {
  border-color: #fff;
  background: #fff;
  color: #000;
  outline: 0;
}

.sim-site-nav-art {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: currentColor;
}

.sim-site-nav-art img {
  display: block;
  width: auto;
  max-width: 70%;
  max-height: 56%;
  object-fit: contain;
  transition: filter .14s ease;
}

.sim-site-nav-item:hover img,
.sim-site-nav-item:focus-visible img,
.sim-site-nav-item.is-lit img { filter: invert(1); }

.sim-site-nav-art-fortpolio img { max-width: 88%; max-height: 78%; }
.sim-site-nav-art-ohm img { max-width: 47%; max-height: 38%; }
.sim-site-nav-art-astroesoteric img { max-width: 54%; max-height: 42%; }

.sim-site-nav-masonry {
  display: block;
  color: currentColor;
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: calc(var(--sim-nav-seat) * .56);
  font-weight: 300;
  letter-spacing: -.08em;
  line-height: 1;
  transform: translateY(-.08em);
}

.sim-site-nav-ironmongery {
  display: block;
  width: 46%;
  height: 46%;
  color: currentColor;
}

.sim-site-nav-rotor {
  transform-box: view-box;
  transform-origin: 32px 32px;
  animation: sim-site-nav-turn 28s linear infinite;
}

@keyframes sim-site-nav-turn { to { transform: rotate(360deg); } }

.sim-site-nav-name {
  position: absolute;
  top: calc(100% + 9px);
  left: 50%;
  display: block;
  color: #fff;
  font-family: "Space Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: .2em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -3px);
  transition: opacity .16s ease, transform .16s ease;
  pointer-events: none;
}

.sim-site-nav-item:hover .sim-site-nav-name,
.sim-site-nav-item:focus-visible .sim-site-nav-name,
.sim-site-nav-item.is-lit .sim-site-nav-name {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sim-site-nav-description {
  min-height: 38px;
  width: min(680px, calc(100vw - 40px));
  margin: 30px 0 0;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1.55;
  text-align: center;
  text-transform: lowercase;
  text-wrap: pretty;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}

/* The home row is the same bare-mark interaction used by Fortpolio's Current
   Live Projects. Its seats are hit areas only: no tile, border, fill, caption,
   or image inversion is allowed to appear. */
.sim-site-nav[data-variant="hero"] {
  --sim-nav-seat: 72px;
  display: block;
}

.sim-site-nav[data-variant="hero"] .sim-site-nav-rail {
  grid-template-columns: repeat(5, var(--sim-nav-seat));
  justify-content: space-between;
  align-items: center;
  gap: 0;
  width: 100%;
}

.sim-site-nav[data-variant="hero"] .sim-site-nav-item {
  width: var(--sim-nav-seat);
  height: var(--sim-nav-seat);
  padding: 8px;
  border: 0;
  background: transparent;
  line-height: 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}

.sim-site-nav[data-variant="hero"] .sim-site-nav-item:hover,
.sim-site-nav[data-variant="hero"] .sim-site-nav-item:focus-visible,
.sim-site-nav[data-variant="hero"] .sim-site-nav-item.is-lit {
  border: 0;
  background: transparent;
  color: #fff;
  outline: 0;
}

.sim-site-nav[data-variant="hero"] .sim-site-nav-art img,
.sim-site-nav[data-variant="hero"] .sim-site-nav-item:hover img,
.sim-site-nav[data-variant="hero"] .sim-site-nav-item:focus-visible img,
.sim-site-nav[data-variant="hero"] .sim-site-nav-item.is-lit img { filter: none; }

/* C199: the landing rail says the name and, under it, one plain sentence about
   where the mark leads. On the landing it is seated out of flow, directly under
   the rail, so nothing below it moves when it appears. */
.sim-site-nav[data-variant="hero"] .sim-site-nav-description {
  position: absolute;
  top: calc(100% + 24px);
  left: 50%;
  width: min(560px, calc(100vw - 40px));
  min-height: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  transform: translate(-50%, -3px);
}

.sim-site-nav[data-variant="hero"].has-description .sim-site-nav-description {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* C190: the project name belongs immediately under the mark on every live
   project rail, including the landing. */
.sim-site-nav[data-variant="hero"] .sim-site-nav-name {
  top: calc(100% + 5px);
}

.sim-site-nav[data-variant="hero"].mark-lit .sim-site-nav-item {
  opacity: .22;
  transform: translateY(9px) scale(.94);
}

.sim-site-nav[data-variant="hero"].mark-lit .sim-site-nav-item.lit {
  opacity: 1;
  transform: translateY(-7px) scale(1.05);
}

.sim-site-nav[data-variant="hero"].mark-going .sim-site-nav-item {
  opacity: 0;
  transform: translateY(16px) scale(.9);
}

.sim-site-nav[data-variant="hero"].mark-going .sim-site-nav-item.lit {
  opacity: 1;
  transform: translateY(-4px) scale(1.5);
}

.sim-site-nav[data-variant="hero"] .sim-site-nav-art-masonry .sim-site-nav-masonry {
  font-size: 48px;
  transform: none;
}

.sim-site-nav[data-variant="hero"] .sim-site-nav-art-ironmongery img { width: 48px; height: 48px; }
.sim-site-nav[data-variant="hero"] .sim-site-nav-art-astroesoteric img { width: auto; max-width: 38px; height: 30px; max-height: 30px; }
.sim-site-nav[data-variant="hero"] .sim-site-nav-art-ohm .sim-site-nav-ohm-live { width: 36px; height: 29px; }
.sim-site-nav[data-variant="hero"] .sim-site-nav-art-fortpolio img { width: 60px; max-width: 60px; height: 58px; max-height: 58px; }

.sim-site-nav.has-description .sim-site-nav-description {
  opacity: 1;
  transform: translateY(0);
}

.sim-site-nav[data-variant="footer"] {
  --sim-nav-seat: 70px;
  min-height: 0;
  height: 100%;
  align-content: center;
  padding: 30px 20px 30px;
  background: #000;
}

/* The close keeps the sentence in flow, with its space already reserved, so
   the page does not move when a mark is hovered. */
.sim-site-nav[data-variant="footer"] .sim-site-nav-description {
  width: min(560px, calc(100vw - 40px));
  margin-top: 26px;
  font-size: 11px;
  line-height: 1.5;
}

.sim-site-nav-heading {
  margin: 0 0 16px;
  color: #fff;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

/* The portfolio close repeats the landing's bare-mark mechanism. */
.sim-site-nav[data-variant="footer"] .sim-site-nav-item {
  width: var(--sim-nav-seat);
  height: var(--sim-nav-seat);
  padding: 8px;
  border: 0;
  background: transparent;
  line-height: 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}

.sim-site-nav[data-variant="footer"] .sim-site-nav-item:hover,
.sim-site-nav[data-variant="footer"] .sim-site-nav-item:focus-visible,
.sim-site-nav[data-variant="footer"] .sim-site-nav-item.is-lit {
  border: 0;
  background: transparent;
  color: #fff;
  outline: 0;
}

.sim-site-nav[data-variant="footer"] .sim-site-nav-art img,
.sim-site-nav[data-variant="footer"] .sim-site-nav-item:hover img,
.sim-site-nav[data-variant="footer"] .sim-site-nav-item:focus-visible img,
.sim-site-nav[data-variant="footer"] .sim-site-nav-item.is-lit img { filter: none; }

.sim-site-nav[data-variant="footer"] .sim-site-nav-name { top: calc(100% + 5px); }
.sim-site-nav[data-variant="footer"].mark-lit .sim-site-nav-item { opacity: .22; transform: translateY(9px) scale(.94); }
.sim-site-nav[data-variant="footer"].mark-lit .sim-site-nav-item.lit { opacity: 1; transform: translateY(-7px) scale(1.05); }
.sim-site-nav[data-variant="footer"].mark-going .sim-site-nav-item { opacity: 0; transform: translateY(16px) scale(.9); }
.sim-site-nav[data-variant="footer"].mark-going .sim-site-nav-item.lit { opacity: 1; transform: translateY(-4px) scale(1.5); }
.sim-site-nav[data-variant="footer"] .sim-site-nav-art-masonry .sim-site-nav-masonry { font-size: 48px; transform: none; }
.sim-site-nav[data-variant="footer"] .sim-site-nav-art-ironmongery img { width: 48px; height: 48px; }
.sim-site-nav[data-variant="footer"] .sim-site-nav-art-astroesoteric img { width: auto; max-width: 38px; height: 30px; max-height: 30px; }
.sim-site-nav[data-variant="footer"] .sim-site-nav-art-ohm .sim-site-nav-ohm-live { width: 36px; height: 29px; }
.sim-site-nav[data-variant="footer"] .sim-site-nav-art-fortpolio img { width: 60px; max-width: 60px; height: 58px; max-height: 58px; }

.sim-site-nav[data-variant="compact"] {
  --sim-nav-seat: 54px;
  position: absolute;
  right: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 0;
  z-index: 6;
}

/* C199: the Astro Esoteric and OHM rails wore the older boxed dock while the
   landing, the close and the two product pages had already moved to the bare
   mark. One rail language now, everywhere. */
.sim-site-nav[data-variant="compact"] .sim-site-nav-item {
  padding: 8px;
  border: 0;
  background: transparent;
  line-height: 0;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease;
}

.sim-site-nav[data-variant="compact"] .sim-site-nav-item:hover,
.sim-site-nav[data-variant="compact"] .sim-site-nav-item:focus-visible,
.sim-site-nav[data-variant="compact"] .sim-site-nav-item.is-lit {
  border: 0;
  background: transparent;
  color: #fff;
  outline: 0;
}

.sim-site-nav[data-variant="compact"] .sim-site-nav-art img,
.sim-site-nav[data-variant="compact"] .sim-site-nav-item:hover img,
.sim-site-nav[data-variant="compact"] .sim-site-nav-item:focus-visible img,
.sim-site-nav[data-variant="compact"] .sim-site-nav-item.is-lit img { filter: none; }

.sim-site-nav[data-variant="compact"].mark-lit .sim-site-nav-item { opacity: .22; transform: translateY(9px) scale(.94); }
.sim-site-nav[data-variant="compact"].mark-lit .sim-site-nav-item.lit { opacity: 1; transform: translateY(-7px) scale(1.05); }
.sim-site-nav[data-variant="compact"].mark-going .sim-site-nav-item { opacity: 0; transform: translateY(16px) scale(.9); }
.sim-site-nav[data-variant="compact"].mark-going .sim-site-nav-item.lit { opacity: 1; transform: translateY(-4px) scale(1.5); }
.sim-site-nav[data-variant="compact"] .sim-site-nav-art-masonry .sim-site-nav-masonry { font-size: 36px; transform: none; }
.sim-site-nav[data-variant="compact"] .sim-site-nav-art-ironmongery img { width: 36px; height: 36px; }
.sim-site-nav[data-variant="compact"] .sim-site-nav-art-astroesoteric img { width: auto; max-width: 30px; height: 24px; max-height: 24px; }
.sim-site-nav[data-variant="compact"] .sim-site-nav-art-ohm .sim-site-nav-ohm-live { width: 29px; height: 23px; }
.sim-site-nav[data-variant="compact"] .sim-site-nav-art-fortpolio img { width: 46px; max-width: 46px; height: 44px; max-height: 44px; }

/* The rail sits at the foot of a full-screen card, so its name and sentence
   both read upward, out of flow, and nothing under them moves. */
.sim-site-nav[data-variant="compact"] .sim-site-nav-name { top: auto; bottom: calc(100% + 8px); }
.sim-site-nav[data-variant="compact"] .sim-site-nav-description {
  position: absolute;
  bottom: calc(100% + 26px);
  left: 50%;
  width: min(560px, calc(100vw - 40px));
  min-height: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  transform: translate(-50%, 3px);
}

.sim-site-nav[data-variant="compact"].has-description .sim-site-nav-description {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (max-width: 640px) {
  .sim-site-nav,
  .sim-site-nav[data-variant="footer"] { --sim-nav-seat: 50px; --sim-nav-gap: 7px; }
  .sim-site-nav[data-variant="compact"] { --sim-nav-seat: 42px; --sim-nav-gap: 6px; }
  .sim-site-nav[data-variant="footer"] { min-height: 0; padding: 26px 12px 34px; }
  .sim-site-nav-heading { margin-bottom: 13px; font-size: 8px; }
  .sim-site-nav-description { width: min(88vw, 520px); font-size: 10px; }
  .sim-site-nav-name { font-size: 6px; letter-spacing: .12em; }
  .sim-site-nav[data-variant="hero"] { --sim-nav-seat: 58px; }
  .sim-site-nav[data-variant="hero"] .sim-site-nav-art-masonry .sim-site-nav-masonry { font-size: 40px; }
  .sim-site-nav[data-variant="hero"] .sim-site-nav-art-ironmongery img { width: 40px; height: 40px; }
  .sim-site-nav[data-variant="hero"] .sim-site-nav-art-astroesoteric img,
  .sim-site-nav[data-variant="footer"] .sim-site-nav-art-astroesoteric img { max-width: 31px; height: 24px; max-height: 24px; }
  .sim-site-nav[data-variant="hero"] .sim-site-nav-art-fortpolio img,
  .sim-site-nav[data-variant="footer"] .sim-site-nav-art-fortpolio img { width: 48px; max-width: 48px; height: 46px; max-height: 46px; }
  .sim-site-nav[data-variant="footer"] .sim-site-nav-art-masonry .sim-site-nav-masonry { font-size: 40px; }
  .sim-site-nav[data-variant="footer"] .sim-site-nav-art-ironmongery img { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .sim-site-nav-rotor { animation: none; }
  .sim-site-nav-item,
  .sim-site-nav-art img,
  .sim-site-nav-name,
  .sim-site-nav-description { transition: none; }
  .sim-site-nav[data-variant="hero"] .sim-site-nav-item { transition: none; }
}