.directory-hero { padding-bottom: 2.4rem; }
.directory-actions,
.profile-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: var(--space-text); }

/* Countries and regions: a plain list of names in columns, each with a
   quiet count beside it. */
.place-list { columns: 13rem; column-gap: 2.5rem; margin: 0; padding: 0; list-style: none; }
.place-list li { padding: 0.32rem 0; break-inside: avoid; }
.place-list a { color: var(--sect-text); font-weight: 600; }
.place-count { margin-left: 0.3rem; color: var(--muted); font-size: 0.9rem; }

.location-regions { margin: 2rem 0; }
.country-sanghas { margin-top: 2.5rem; }
.directory-welcome .note { margin-top: 0.4rem; }

/* The head of each browsing page sits beside a photograph, as the finder's
   welcome does: the words held to their measure on the left, the picture on
   the right, the space left over between them. Same columns as .welcome in
   site.css, so the two kinds of page line up. */
.directory-welcome {
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(0, 26rem);
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.directory-welcome figure.photo { margin: 0; max-width: none; }
.directory-body { padding-top: 1rem; }
@media (max-width: 900px) {
  .directory-welcome { grid-template-columns: minmax(0, 1fr); }
  .directory-welcome figure.photo { max-width: 30rem; }
  .profile-head figure.photo { max-width: 15rem; }
}

/* Sanghas: ruled rows, two abreast where there is room. */
.rows.sangha-rows {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
  column-gap: 3rem; max-width: none; border-top: 0;
}
.sangha-rows a.row { border-top: 1px solid var(--rule); border-bottom: 0; }
.sangha-rows .row-title { display: block; color: var(--sect-text); }
.sangha-rows .row-place { display: block; color: var(--muted); font-size: 0.95rem; }
.sangha-rows .row-note { display: -webkit-box; overflow: hidden; margin-top: 0.15rem; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.breadcrumbs { padding-top: 1.1rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; color: var(--muted); font-size: 0.9rem; list-style: none; }
.breadcrumbs li:not(:last-child)::after { margin-left: 0.35rem; content: '→'; }

/* A sangha's page opens like the browsing pages, words beside a picture,
   and is then one sheet, its parts set apart by a rule. The picture is drawn
   from what the directory knows (src/sangha-picture.ts): a globe for a
   sangha that meets somewhere, a card of words for one that meets online.
   One square box, its right edge on the sheet's, so every page has the one
   shape. */
.sangha-profile { max-width: 56rem; }
/* Wider than a phone or a narrow window only: below that the head is one
   column, the picture under the words, as the browsing pages have it. */
@media (min-width: 901px) {
  .profile-head { grid-template-columns: minmax(0, 1fr) 15rem; }
}
.profile-sheet { margin-top: 2.3rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.profile-section { padding: 1.5rem clamp(1.2rem, 4vw, 2rem); }
.profile-section + .profile-section { border-top: 1px solid var(--rule); }
.profile-section h2 { margin-bottom: 0.6rem; font-size: 1.2rem; }
.profile-section > :last-child { margin-bottom: 0; }
.profile-section ul { margin: 0; padding-left: 1.25rem; }
/* The few things weighed first, under the name, in the body's own size and
   colour, as the words under every public title are: in person or online,
   roughly where, the languages, any affinity, with dots between them. */
.profile-key {
  display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem;
  margin: 0.9rem 0 0; padding: 0; list-style: none;
}
.profile-key li + li::before { content: "\00b7"; margin-right: 0.6rem; opacity: 0.55; }
/* Each meeting in the reader's time and the sangha's own, one line each,
   each saying whose time it is; the meetings a little apart. */
.profile-section .profile-meetings { margin: 0; padding: 0; list-style: none; }
.profile-meetings li + li { margin-top: 0.7rem; }
.meeting-line { display: block; }
.meeting-label { color: var(--muted); }
/* Ways onward from a part of the sheet, set as links with a dot between,
   close under what they lead on from. */
.profile-section p:has(+ .profile-links) { margin-bottom: 0.25rem; }
.profile-links { margin: 0; }
/* Get directions carries a class for its script, so it is underlined here as
   the link beside it is. */
.profile-links a { text-decoration: var(--link-underline); text-underline-offset: var(--link-offset); }
.profile-links a:hover { text-decoration: underline; }
.profile-intro { background: var(--ground-2); border-radius: 0 0 var(--radius) var(--radius); scroll-margin-top: 1rem; }
.intro-inline { max-width: 26rem; margin-top: 1rem; }
/* Under the sheet, quietly: who stands behind the sangha, and the way in
   for its own contact. */
.profile-notes { margin-top: 1.3rem; color: var(--muted); font-size: 0.95rem; }
.profile-notes p { margin: 0 0 0.3rem; }
.preserve-lines { white-space: pre-line; }

.sangha-picture .globe {
  width: 100%; aspect-ratio: 1; height: auto;
  background: var(--ground-2);
}
/* The side's highlight behind the globe. The globe itself is the card's
   white sea and sage land, with a rim in the highlight and the accent for
   the dots, and for the thin line that joins an online sangha's. */
.sangha-picture .globe { display: block; background: var(--sect-soft); }
.globe-sea { fill: var(--card); }
.globe-land { fill: var(--sage); fill-opacity: 0.55; stroke: var(--sage); stroke-opacity: 0.55; stroke-width: 0.6; }
.globe-lines { fill: none; stroke: var(--rule); stroke-width: 1; }
.globe-edge { fill: none; stroke: var(--sect); stroke-width: 1.5; }
.globe-dot { fill: var(--accent-strong); stroke: var(--card); stroke-width: 3; }
.globe-dot-small { stroke-width: 2; }
.globe-link {
  fill: none; stroke: var(--accent-strong); stroke-width: 2; stroke-opacity: 0.7;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 620px) {
  .directory-actions .btn,
  .profile-actions .btn { width: 100%; justify-content: center; }
  /* On a phone the globe is small, beside the sangha's name, so the page
     opens on the sangha rather than on a picture of the world; the rest of
     the head runs the full width under them. */
  .profile-head { grid-template-columns: minmax(0, 1fr) 5rem; column-gap: 1rem; row-gap: 0; }
  .profile-head .directory-words { display: contents; }
  .profile-head .directory-words > * { grid-column: 1 / -1; }
  .profile-head .directory-words > .kicker,
  .profile-head .directory-words > h1 { grid-column: 1; }
  .profile-head figure.sangha-picture { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 5rem; }
}

/* ---- small type ---------------------------------------
   Everything this sheet sets at 0.9rem or smaller, apart from
   small capitals, is set a little apart (--tracking-small in
   tokens.css). Kept in one list rather than beside each size,
   at no weight of its own, so a rule that sets its own spacing
   still has the last word. A new small size belongs here too. */
:where(
  .place-count,
  .breadcrumbs ol
) { letter-spacing: var(--tracking-small); }