/* Home: the line field is decorative; the portal links carry all navigation semantics. */
.is-home {
  overflow-x: hidden;
}
.is-home .site-footer {
  display: none;
}
.field-scroll {
  height: 100dvh;
}
.field-stage {
  --ocean: #ca462f;
  --ink: #fff1ec;
  --signal: #9db7f0;
  --field-rail: clamp(9rem, 13vw, 12.5rem);
  isolation: isolate;
  position: sticky;
  top: 0;
  min-height: 640px;
  height: 100dvh;
  overflow: hidden;
  background-color: var(--ocean);
  background-image: url("../img/field-day-salt-lake.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--ink);
}
html[data-site-theme="night"] .field-stage {
  background-image: url("../img/field-night-ukiyo.png");
}
.field-canvas,
.field-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.field-canvas {
  z-index: -2;
  opacity: 0.62;
}
.field-grid {
  z-index: -1;
  opacity: 0.07;
  pointer-events: none;
  background-image:
    linear-gradient(
      90deg,
      transparent 24.9%,
      var(--ink) 25%,
      transparent 25.1%,
      transparent 74.9%,
      var(--ink) 75%,
      transparent 75.1%
    ),
    linear-gradient(
      180deg,
      transparent 19.9%,
      var(--ink) 20%,
      transparent 20.1%,
      transparent 79.9%,
      var(--ink) 80%,
      transparent 80.1%
    );
}
.field-header {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  color: var(--signal);
}
.field-brand {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: 5.75rem;
  padding: 1.1rem clamp(1rem, 3vw, 3rem);
  border-bottom: 1px solid var(--ink);
  font: 900 clamp(1.5rem, 2.8vw, 2.7rem)/1 var(--display);
  letter-spacing: -0.06em;
  pointer-events: auto;
}
.field-nav {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-rows: repeat(5, minmax(0, 1fr));
  width: var(--field-rail);
  border-left: 1px solid var(--ink);
  pointer-events: auto;
}
.field-nav a {
  position: relative;
  display: grid;
  min-width: 0;
  padding: 1rem;
  place-content: center;
  border-bottom: 1px solid var(--ink);
  text-align: center;
  transition:
    background 0.28s var(--ease),
    color 0.28s var(--ease);
}
.field-nav a:last-child {
  border-bottom: 0;
}
.field-nav a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.field-nav a:hover,
.field-nav a:focus-visible {
  background: var(--signal);
  color: var(--ocean);
}
.field-nav a:hover:after,
.field-nav a:focus-visible:after {
  background: var(--ocean);
  transform: scaleX(1);
}
.field-nav span {
  position: relative;
  z-index: 1;
  font: 900 clamp(1.1rem, 1.7vw, 1.55rem)/1 var(--display);
  letter-spacing: -0.04em;
}
.field-title {
  position: absolute;
  z-index: 1;
  left: clamp(1rem, 4vw, 4.4rem);
  right: calc(var(--field-rail) + clamp(1rem, 3vw, 3rem));
  bottom: clamp(3rem, 8vh, 6rem);
  display: grid;
  justify-items: start;
  gap: clamp(0.9rem, 2.1vw, 2.2rem);
  color: var(--signal);
  font-family: var(--display);
  line-height: 0.74;
  letter-spacing: -0.085em;
  pointer-events: none;
}
.field-title span,
.field-title strong {
  font-size: clamp(4rem, 11.2vw, 11rem);
  font-weight: 900;
}

/* Manual day/night toggle: a calibration-mark button, keyboard accessible. */
.field-theme-toggle {
  position: absolute;
  z-index: 3;
  right: calc(var(--field-rail) + clamp(1rem, 3vw, 3rem));
  bottom: clamp(3rem, 8vh, 6rem);
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--signal);
  border-radius: 50%;
  background: transparent;
  color: var(--signal);
  cursor: pointer;
  pointer-events: auto;
}
.field-theme-toggle .theme-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1.15rem;
  height: 1.15rem;
  transition:
    opacity 0.42s var(--ease),
    transform 0.54s var(--ease);
}
.field-theme-toggle .theme-icon-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.field-theme-toggle .theme-icon-moon {
  opacity: 0;
  transform: rotate(-80deg) scale(0.42);
}
html[data-site-theme="night"] .field-theme-toggle .theme-icon-sun {
  opacity: 0;
  transform: rotate(75deg) scale(0.42);
}
html[data-site-theme="night"] .field-theme-toggle .theme-icon-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}
.field-theme-toggle:hover,
.field-theme-toggle:focus-visible {
  background: var(--signal);
  color: var(--ocean);
  outline: 0;
}
.field-theme-toggle:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}
.field-theme-toggle.is-flipping .theme-icon {
  animation: field-icon-turn 0.52s var(--ease);
}
@keyframes field-icon-turn {
  0% {
    transform: scale(1);
  }
  45% {
    filter: blur(0.6px);
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}