/* Front-page "What's inside" TypographicWall. Without WebGL2 / JS the
   server-rendered link list below is the visible navigation; once the wall
   mounts (data-typographic-wall="on") the list hides and the per-word overlay
   links on top of the canvas take over. */
.typo-wall{
  position:relative;isolation:isolate;overflow:hidden;
  height:420px;background:var(--bg,#0a0a0b);
  border-bottom:1px solid var(--line,rgba(212,175,55,.16));
  touch-action:pan-y;
}
.typo-wall__fallback,
.typographic-wall__fallback{
  list-style:none;margin:0;padding:48px 16px;height:100%;
  display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:center;
  align-content:center;
}
.typo-wall__fallback a,
.typographic-wall__fallback a{
  font-family:var(--mono);font-weight:500;font-size:1.05rem;letter-spacing:.06em;
  color:var(--gold-2,#E8CE7A);text-decoration:none;padding:6px 4px;
}
.typo-wall__fallback a:hover,
.typographic-wall__fallback a:hover{color:#f6f1e1;text-decoration:underline;text-underline-offset:4px}
.typo-wall[data-typographic-wall="on"] .typo-wall__fallback{display:none}

/* Overlay links sit transparently over the drawn words. Keyboard focus gets
   a visible gold ring and the label itself, so focus is always findable even
   mid-dissolve (the original component set outline:none). */
.typo-wall .typographic-wall__word{border-radius:3px}
.typo-wall .typographic-wall__word:focus{outline:none}
.typo-wall .typographic-wall__word:focus-visible{
  outline:2px solid var(--gold-2,#E8CE7A) !important;outline-offset:4px;
  color:var(--gold-2,#E8CE7A) !important;background:rgba(10,10,11,.88) !important;
  overflow:visible !important;
}

@media (max-width:699px){
  .typo-wall{height:360px}
}