/* ═══════════════════════════════════════════════════════════
   The town rooms — levels 2 and 3 of the depth axis.
   Extends base.css; restates no palette value.
   Every one of these is optional. None of them may be needed to buy a book.
   ═══════════════════════════════════════════════════════════ */

.room-head {
  padding-block: var(--space-lg) var(--space-md);
}

.room-head h1 { margin-top: var(--space-sm); }

.room-head__line {
  margin-top: var(--space-md);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  max-width: 44ch;
  color: var(--text-lead);
}

.crumb {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ── The directory of rooms ────────────────────────────────── */

.rooms {
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.rooms a {
  display: block;
  height: 100%;
  padding: var(--space-md);
  background: var(--surface);
  border: 1px solid var(--rule-on-surface);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease);
}

.rooms a:hover { border-color: var(--text); }
.rooms h2 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); max-width: none; }
.rooms p {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted-on-surface);
  max-width: none;
}

/* ── Places ────────────────────────────────────────────────
   A list, not an image map. It works on a keyboard because it is made of
   headings and text, which is the point. */

.places {
  margin: 0;
  padding: 0;
  list-style: none;
}

.places > li {
  padding-block: var(--space-md);
  border-top: 1px solid var(--rule);
}

.place__name {
  font-size: var(--text-lg);
  font-weight: 600;
  font-family: var(--font-serif);
}

.place__who {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  margin-top: var(--space-2xs);
}

.place p { margin-top: var(--space-xs); max-width: 62ch; }

.area {
  margin-top: var(--space-xl);
}

.area > h2 {
  font-size: var(--text-xl);
  padding-bottom: var(--space-xs);
}

/* ── People ────────────────────────────────────────────────── */

.folk {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-md);
}

.folk > li {
  padding-block: var(--space-md);
  border-top: 1px solid var(--rule);
}

.folk__name { font-size: var(--text-lg); font-weight: 600; }

.folk__role {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text);
  margin-top: var(--space-2xs);
}

.folk p { margin-top: var(--space-xs); max-width: 62ch; }

.tag {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 0.15em 0.5em;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  border: 1px solid var(--rule-carrying);
  border-radius: var(--radius-sm);
  vertical-align: middle;
}

/* ── Spoiler gate ──────────────────────────────────────────── */

.reader-level {
  margin: var(--space-lg) 0 0;
  padding: var(--space-sm) 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.reader-level legend {
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.reader-level__note {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-muted);
  max-width: 60ch;
}

.reader-level__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  margin-top: var(--space-2xs);
}

.reader-level__options label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;          /* a generous target, not a pinprick */
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
}

.reader-level__options input { width: 1.15rem; height: 1.15rem; accent-color: var(--bone); }

details.spoiler {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-md);
}

details.spoiler > summary {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

details.spoiler[open] > summary { margin-bottom: var(--space-xs); }
details.spoiler p { max-width: 62ch; }

/* ── The farm year ─────────────────────────────────────────── */

.season {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}

.season h3 { font-size: var(--text-lg); }

.season__when {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
}