/* The story as text (read/<id>.html), inside the preview's window. Its own
   nav -- "Play the story", "All stories" -- is drawn like the engine's tabs
   (card, ink edge, scissored clip, Andika), so the way back reads as part of
   the same world. Site-side; staged by tools/stage_preview.py. Colours are
   the engine's tokens (design/tokens.css). */
nav.sf-back {
  position: sticky; top: 0; z-index: 2;
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin: -2rem -1rem 1.5rem; padding: .75rem 1rem;
  background: #fdfcfb;
}
nav.sf-back a {
  display: inline-flex; align-items: center;
  min-height: 56px; min-width: 56px; margin: 0; padding: .45rem 1.1rem;
  font: 700 1.05rem/1.2 "Andika", system-ui, sans-serif;
  color: #1E1B18; background: #FFFDF7; text-decoration: none;
  border: 3px solid #1E1B18;
  clip-path: polygon(0% 3%, 14% 0%, 31% 4%, 50% 0.6%, 68% 4%, 86% 0.4%, 100% 3%,
    98.6% 50%, 100% 97%, 84% 100%, 66% 96%, 48% 100%, 30% 96.5%, 13% 100%, 0% 97%, 1.4% 50%);
}
nav.sf-back a:first-child { background: #FFC72C; }
nav.sf-back a:hover { background: #ffd65c; }
nav.sf-back a:focus-visible { outline: 3px solid #1d3f9e; outline-offset: 3px; clip-path: none; }
@media (forced-colors: active) { nav.sf-back a { border-color: LinkText; clip-path: none; } }