/* GayStash — tags: the landing, the directory and the top list.
   These are the pages that earn the traffic, so they carry real prose and
   real internal links rather than a grid and nothing else. */

/* ── breadcrumb ─────────────────────────────────────────────────
   Visible and marked up. On a long-tail landing it is the only thing
   telling a reader arriving cold from Google where they actually are. */
.crumb{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  padding:16px 14px 0;font-size:12.5px;font-weight:600;color:var(--text-3);
}
.crumb a{color:var(--text-3)}
.crumb a:hover{color:var(--accent)}
.crumb span{color:var(--text-2)}
.crumb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;opacity:.6}

/* ── the intro ──────────────────────────────────────────────────
   One short paragraph that says what is actually in here and how it got
   here. Not keyword filler: a reader who bounces teaches the ranking
   more than the words do. */
.intro{
  max-width:68ch;padding:10px 14px 0;
  font-size:14.5px;font-weight:500;line-height:1.6;color:var(--text-2);
}
.intro b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.intro a{color:var(--accent);font-weight:600}
.intro + .intro{padding-top:9px}

/* ── related tags ───────────────────────────────────────────────
   The whole internal-link graph for 36,845 pages hangs off this row, so
   the counts are shown: a reader can tell a real tag from a dead one. */
.rel{display:flex;flex-wrap:wrap;gap:7px;padding:14px 14px 0}
.rel a{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;
  border-radius:var(--r-pill);background:var(--surface-2);
  font-size:13.5px;font-weight:600;color:var(--text-2);
}
.rel a:hover{background:var(--surface-3);color:var(--text)}
.rel a b{font-size:12px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}
.rel a:hover b{color:var(--text-2)}
.rel-lab{
  width:100%;padding-bottom:2px;
  font-size:11.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-3);
}

/* ── top tags ───────────────────────────────────────────────────
   Size carries the count, so the shape of the vocabulary is visible at a
   glance — and the long tail below it is where the traffic actually is. */
.cloud{display:flex;flex-wrap:wrap;gap:9px;padding:0 14px 8px}
.cloud a{
  display:inline-flex;align-items:baseline;gap:8px;
  padding:9px 15px;border-radius:var(--r-md);background:var(--surface);
  font-weight:800;letter-spacing:-.02em;color:var(--text);
}
.cloud a:hover{background:var(--surface-2);color:var(--accent)}
.cloud a b{font-size:12.5px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:0}
.cloud .s1{font-size:26px}
.cloud .s2{font-size:22px}
.cloud .s3{font-size:19px}
.cloud .s4{font-size:16px}

/* ── the directory ──────────────────────────────────────────────
   36,845 entries have to be reachable in a few hops without any one page
   being enormous. Letter buckets, a dense column list, real hrefs. */
.abc{
  display:flex;flex-wrap:wrap;gap:5px;
  padding:0 14px 4px;
}
.abc a{
  min-width:34px;height:34px;padding:0 8px;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface);font-size:13.5px;font-weight:700;color:var(--text-2);
  text-transform:uppercase;
}
.abc a:hover{background:var(--surface-2);color:var(--text)}
.abc a.on{background:var(--text);color:var(--bg)}
.abc a.off{opacity:.35;pointer-events:none}

.bucket{padding:22px 14px 0}
.bucket h2{
  font-size:19px;text-transform:uppercase;letter-spacing:-.01em;
  padding-bottom:2px;
}
.bucket > p{font-size:12.5px;font-weight:600;color:var(--text-3);padding-bottom:10px}
.tlist{
  columns:2;column-gap:22px;
  font-size:13.5px;font-weight:600;
}
.tlist a{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  padding:6px 0;break-inside:avoid;color:var(--text-2);
}
.tlist a:hover{color:var(--accent)}
.tlist a b{flex:none;font-size:12px;font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums}
/* a tag with almost nothing behind it is still listed — it just says so */
.tlist a.thin{color:var(--text-3)}

/* ── the indexing rule, stated on the page that enforces it ──── */
.idx{
  margin:18px 14px 0;padding:13px 0 0;border-top:1px solid var(--line);
  max-width:68ch;font-size:12.5px;font-weight:500;line-height:1.55;color:var(--text-3);
}
.idx b{color:var(--text-2);font-weight:700;font-variant-numeric:tabular-nums}

@media (min-width:700px){
  .tlist{columns:3}
}
@media (min-width:1000px){
  .crumb{padding:22px 22px 0}
  .intro{padding:11px 22px 0}
  .rel{padding:16px 22px 0}
  .cloud{padding:0 22px 10px}
  .abc{padding:0 22px 4px}
  .bucket{padding:26px 22px 0}
  .tlist{columns:4}
  .idx{margin:22px 22px 0}
}