/**
 * Homepage-only layout: the title, the rack wrapper, and the invisible
 * nav overlay positioned over the SVG's key areas. The shared dark wall
 * background lives in style.css since future pages reuse it too.
 */

.section-rack {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6vh 1.5rem;
  gap: 1.4rem;
}

/* Site title — a quiet imprint, not a wordmark. Closer to the type on a
   book's half-title page than a logo: a light italic serif, modest
   size, barely-there tracking. It resolves in after the object has
   already had its first quiet moment, and never competes with it. */
.site-title {
  font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.06em;
  color: rgba(210, 216, 230, 1);
  opacity: 0;
  animation: resolve-in 2.2s ease-out forwards;
  animation-delay: 2s;
}
@keyframes resolve-in {
  from { opacity: 0; }
  to   { opacity: 0.5; }
}

/* Rack + nav wrapper — the visual focus of the page, still surrounded
   by generous negative space. */
.rack-wrapper {
  position: relative;
  width: clamp(350px, 48vw, 480px);
  overflow: visible;
}

.rack-svg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
  /* The SVG is purely visual — every effect inside it is driven by
     key-rack.js/CSS, none of it listens for mouse events. Without this,
     the SVG's own visible, hit-testable shapes (the glowing key paths)
     can intercept clicks/hovers meant for the .key-nav overlay sitting
     at the same position, since it has an explicit z-index (creating
     its own stacking context) while .key-nav does not. Letting pointer
     events pass straight through is what makes the overlay clickable. */
  pointer-events: none;
}

/* Invisible nav layer positioned over the SVG's key areas */
.key-nav {
  position: absolute;
  z-index: 2;
  inset: 0;
}

/*
  Key hit areas — percentages against the rack SVG's 0 0 320 260 viewBox.
  Key centres sit at x=100,160,220; each hit box spans roughly ±35px
  around that, from the bar (y≈30) down through the faint label (y≈190).
  The first key (x=100) currently has no .key-link/.key-home rule at
  all — it has no nav link, see template-parts/key-rack.php and the
  README for how to give it one later.
*/
.key-link {
  position: absolute;
  top: 12%;
  height: 62%;
  cursor: pointer;
  background: transparent;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 4px;
  transition: background 0.2s;
}

/* No outline on click or keyboard focus -- the default browser ring
   drew a stark rectangle around this element's large invisible hit box,
   which read as a UI glitch rather than part of the rack. The key
   itself already carries the real focus signal: key-rack.js binds this
   link's focus/blur to the same .hover class as mouseenter/mouseleave
   (see key-rack.js), so keyboard focus brightens and dips the key's own
   glow exactly like a mouse hover does -- that's the accessible
   indicator. This background wash is the same quiet affordance on the
   hit box itself, just extended from :hover to :focus so both input
   methods agree. */
.key-link:hover,
.key-link:focus {
  background: rgba(255, 255, 255, 0.05);
  outline: none;
}

.key-stories { left: 39.1%; width: 21.9%; }
.key-about   { left: 57.8%; width: 21.9%; }

/* ── Responsive ── */
@media (max-width: 400px) {
  .rack-wrapper { width: clamp(270px, 68vw, 360px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-title { animation: none; opacity: 0.5; }
}