* { box-sizing: border-box; }

/* Same-origin navigation only (unlike the old cross-domain bounce, which
   is exactly why that idea never worked) — this crossfades old/new page
   instead of the default flash-to-white reload. Chromium and Firefox both
   pick this up; elsewhere it's just ignored and falls back to a normal
   navigation. */
@view-transition {
  navigation: auto;
}

:root {
  /* Stacked shadows in the paper color, same trick as halation around
     inked type on real paper — dense right at each glyph, fading out with
     no rectangle anywhere. Replaces an earlier blurred backdrop plate,
     which fixed legibility but always read as a box sitting on the page.
     Heavily repeated at small radii so near-field coverage is close to
     fully opaque, not just a faint tint. */
  --halo:
    0 0 1px #f7f5f0, 0 0 1px #f7f5f0, 0 0 1px #f7f5f0,
    0 0 1px #f7f5f0, 0 0 1px #f7f5f0, 0 0 1px #f7f5f0,
    0 0 2px #f7f5f0, 0 0 2px #f7f5f0, 0 0 2px #f7f5f0,
    0 0 2px #f7f5f0, 0 0 2px #f7f5f0,
    0 0 3px #f7f5f0, 0 0 3px #f7f5f0, 0 0 3px #f7f5f0,
    0 0 3px #f7f5f0,
    0 0 5px #f7f5f0, 0 0 5px #f7f5f0, 0 0 5px #f7f5f0,
    0 0 8px #f7f5f0, 0 0 8px #f7f5f0,
    0 0 12px #f7f5f0,
    0 0 18px #f7f5f0,
    0 0 24px #f7f5f0;
}

html, body {
  margin: 0;
  height: 100%;
  background: #f7f5f0;
  color: #1a1a1a;
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  /* Nothing here is text to select or a page to scroll/pinch-zoom — this
     stops double-taps from selecting text and opening the mobile context
     menu, and stops the browser's own gesture handling from competing
     with touch-driven canvas input (human mode especially). */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#plot {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

main {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Matching names on both themes' equivalent elements let the transition
   morph the chrome in place instead of just cross-fading two flat
   snapshots. */
.info { view-transition-name: page-info; }
.info h1,
.info p { cursor: pointer; }
.controls { view-transition-name: page-controls; }

/* De-emphasis is done with `color` alpha now, never `opacity` — opacity
   fades the halo along with the ink, and it was exactly the de-emphasized
   text (inactive links, date, description) that came out unreadable
   because of it. A translucent ink color still looks "muted" while the
   halo behind it stays fully opaque. */
h1 {
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: lowercase;
  margin: 0 0 0.5rem;
  color: #1a1a1a;
  text-shadow: var(--halo);
}

p {
  font-size: 0.8rem;
  margin: 0;
  color: rgba(26, 26, 26, 0.65);
  text-shadow: var(--halo);
}

.controls {
  position: fixed;
  left: 50%;
  bottom: 15%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  max-width: 90vw;
}

.themes,
.sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.themes a,
.sources a {
  color: rgba(26, 26, 26, 0.45);
  text-decoration: none;
  text-shadow: var(--halo);
}

.themes a.active,
.themes a:hover,
.sources a.active,
.sources a:hover {
  color: #1a1a1a;
}

/* On a wide screen the picker is always open and the toggle stays hidden —
   nothing changes from before this existed. It only does anything under
   the mobile breakpoint below, where 5 theme links and 8 source links
   sitting open by default was too much text at once. */
.picker summary {
  display: none;
}

@media (max-width: 600px) {
  .controls {
    bottom: 6%;
  }

  .picker summary {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    color: rgba(26, 26, 26, 0.45);
    text-shadow: var(--halo);
  }

  .picker summary:hover {
    color: #1a1a1a;
  }

  .picker[open] {
    max-height: 45vh;
    overflow-y: auto;
  }
}

.description {
  max-width: 32rem;
  font-size: 0.7rem;
  line-height: 1.4;
  margin: 0;
  padding: 0 1rem;
  color: rgba(26, 26, 26, 0.6);
  /* Reserves room for two lines (these are short one-liners now, full
     detail lives on /info) so the .controls box doesn't grow/shrink —
     and the nav rows above it shift — depending on what's selected. */
  min-height: 2.8em;
}

.legal-link {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: rgba(26, 26, 26, 0.35);
  text-decoration: none;
  text-shadow: var(--halo);
}

.legal-link:hover {
  color: #1a1a1a;
}

.clear-link {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 1;
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: rgba(26, 26, 26, 0.35);
  text-decoration: none;
  text-shadow: var(--halo);
}

.clear-link:hover {
  color: #1a1a1a;
}