/* Browse index: the landing page of a series that is browsed by subject
   rather than read by date. Loaded only by templates/browse.html.

   The page works without JavaScript: the filter bar and pager stay hidden,
   the single .browse-page holds every card, and the grid simply grows. What
   the script adds is the split into pages and the slide between them. */

/* ---- hero ---------------------------------------------------------- */

/* One column, full width. The hero used to keep a second column for a post
   count and an RSS button; the count says nothing a reader wants, and the
   feed is still announced to readers by the <link rel="alternate"> in the
   head, so the introduction gets the whole line instead. */
.browse-hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 4rem 0 2.5rem;
}

/* The global h1 tracks at -0.08em, which is drawn for the long display
   headline on the home page. On a two-word series name at the same 5rem it
   pulls 58px out of 337 and the letters run together, so this matches the
   -0.02em .hero h1 uses for the same face. */
.browse-hero h1 {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.browse-lead {
  color: var(--muted);
  font-family: var(--font-text);
}

.browse-lead p {
  margin-bottom: 1.1rem;
}

.browse-lead p:last-child {
  margin-bottom: 0;
}

/* ---- filter bar ---------------------------------------------------- */

/* Both of these are laid out with flex, which beats the user-agent rule for
   [hidden] on specificity. Without this they would still be on screen while
   marked hidden: the filter bar dead on a page with no JavaScript, the pager
   showing a lone dot whenever a filter narrows to a single page. */
.browse-filter[hidden],
.browse-pager[hidden] {
  display: none;
}

.browse-filter {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-bg);
}

.browse-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.browse-filter-label {
  flex: 0 0 2.75rem;
  color: var(--faint);
  font-family: var(--font-code);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.browse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.chip {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: var(--font-code);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  line-height: 1.3;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chip.is-active {
  border-color: var(--accent-edge);
  background: var(--accent-soft);
  color: var(--accent);
}

.chip-count {
  margin-left: 0.35rem;
  color: var(--faint);
}

.chip.is-active .chip-count {
  color: var(--accent);
  opacity: 0.7;
}

.chip-tag,
.chip-more {
  padding: 0.25rem 0.65rem;
  font-size: 0.72rem;
}

.chip-more {
  border-style: dashed;
  color: var(--faint);
}

/* ---- the paged grid ------------------------------------------------ */

.browse-viewport {
  overflow: hidden;
}

.browse-track {
  display: flex;
  align-items: stretch;
}

/* Only the scripted page slides. Without the script the track holds one
   page and never moves, so it has nothing to animate. */
.is-paged .browse-track {
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.browse-page {
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  align-content: start;
}

.browse-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel-bg);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.browse-card:hover {
  color: inherit;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}

.browse-card-topic {
  color: var(--accent);
  font-family: var(--font-code);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Card art is a mark, not an illustration: it says which post this is at
   thumbnail size, and the drawings that explain something stay in the post.
   The SVG is inlined, so it paints from the theme variables and needs no
   colors of its own. */
.browse-card-mark svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Inter Tight, not the mono body face. A card is a third of the grid wide,
   which is about 25 mono characters on one line: every real title wraps, and
   a wrapped title pushes the summary down and makes cards of one row disagree
   on height. The same title in Inter Tight is 256px against a 332px box. It
   also matches the summary directly below it and the hero heading. */
.browse-card-title {
  color: var(--text);
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 1.02rem;
  line-height: 1.4;
  text-wrap: pretty;
}

.browse-card:hover .browse-card-title {
  color: var(--accent);
}

.browse-card-summary {
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 0.9rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.browse-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.browse-empty {
  padding: 3rem 0;
  color: var(--muted);
  text-align: center;
}

/* ---- pager --------------------------------------------------------- */

.browse-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.75rem;
}

.browse-readout {
  margin: 0;
  color: var(--faint);
  font-family: var(--font-code);
  font-size: 0.78rem;
}

.browse-pager-controls {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.browse-pager .button:disabled {
  border-color: var(--border);
  color: var(--faint);
  cursor: default;
}

.browse-pager .button:disabled:hover {
  border-color: var(--border);
  color: var(--faint);
}

.browse-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.4rem;
}

.browse-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border-strong);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.browse-dot:hover {
  background: var(--accent-edge);
}

.browse-dot.is-active {
  width: 22px;
  background: var(--accent);
}

/* ---- responsive ---------------------------------------------------- */

@media (max-width: 1000px) {
  .browse-hero {
    padding-top: 3rem;
  }

  .browse-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .browse-filter {
    padding: 1.25rem;
  }

  .browse-filter-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
  }

  .browse-page {
    grid-template-columns: minmax(0, 1fr);
  }

  .browse-pager {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .is-paged .browse-track,
  .browse-dot {
    transition: none;
  }
}