/* /services — the router page. Only what the shared components cannot do:
   the service rows (room photo · one reading column: name, first paragraph, the
   rest, the link), the hero intro's lead, two lede sizes, the "what brings people" closing line, and the close
   laid out beside its headline (LastChapter has no FAQ here, so its head is the
   close's headline). Everything else is service.css. */

/* 0 · the hero intro, every word of the live paragraph, set as a two-sentence lead + the rest */
.svc-hero__intro p.sx-hero-lead { font-size: var(--sc-t-base); line-height: 1.5; color: var(--sc-ink); }
@media (max-width: 860px) { .svc-hero__intro p.sx-hero-lead { font-size: 0.98rem; } }

/* ledes */
.ch-lede > p.sx-big { font-size: var(--sc-t-lg); line-height: 1.55; max-width: 46ch; }

/* 3 · what brings people: the three lists stand on their rules; the close under them */
.sx-brings .tile__t { font-size: var(--sc-t-xl); }
.sx-brings .ticks { gap: var(--sc-3); }
/* three columns: every title keeps two lines' height, so the three lists start on one line */
@media (min-width: 961px) { .sx-brings .tile__t { min-height: calc(2 * 1.2em); } }
.sx-brings__foot { display: grid; gap: var(--sc-5); justify-items: start; margin-top: var(--sc-8); padding-top: var(--sc-6); border-top: 1px solid var(--sc-hairline-strong); }
/* on phones the link runs two lines: break it at the question, not after "free" */
.sx-brings__foot .link { text-wrap: balance; }
.sx-brings__foot p { margin: 0; max-width: 60ch; font-size: var(--sc-t-lg); line-height: 1.55; text-wrap: pretty; }

/* 4 · the router: one ruled row per service, the room beside ONE reading column.
   desktop  [photo] Name ······································ nn / 07
            [photo] first paragraph (display face) · the rest (sans) · note / ticks · link
   phone    thumbnail beside number + name; the words full width under it, the rest
            of the entry behind "Read more" (the page's script opens it from 721px).
   (Sept 22, review round: the old desktop row set the first paragraph and the rest
   side by side, two columns to read at once; one column gives one reading order.) */
.sx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sc-hairline-strong); }
.sx-row {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr) auto;
  grid-template-areas: "img t k" "img text text";
  grid-template-rows: auto 1fr;
  gap: var(--sc-3) clamp(1.5rem, 3.5vw, 3.5rem);
  align-items: start;
  padding-block: var(--sc-6);
  border-bottom: 1px solid var(--sc-hairline);
  scroll-margin-top: 5.5rem;
}
/* the rooms are flat-lit wide shots: a 4:3 frame, zoomed a little about the furniture
   (origin = the row's --pos) so chairs and tables, not ceiling, fill it */
.sx-row__img { grid-area: img; margin: 0; aspect-ratio: 4 / 3; overflow: clip; background: var(--sc-surface); }
.sx-row__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); scale: 1.22; transform-origin: var(--pos, 50% 50%); transition: transform 900ms var(--sc-ease-out); }
.sx-row__k { grid-area: k; margin: 0; color: var(--sc-ink-soft); align-self: baseline; justify-self: end; white-space: nowrap; }
.sx-row__t { grid-area: t; align-self: baseline; max-width: 42rem; font-family: var(--sc-font-display); font-weight: 400; font-size: var(--sc-t-xl); line-height: 1.16; letter-spacing: 0; margin: 0; text-wrap: balance; }
.sx-row__t a { color: inherit; text-decoration: none; }
.sx-row__text { grid-area: text; display: grid; gap: var(--sc-4); align-content: start; max-width: 42rem; margin-top: var(--sc-2); }
.sx-row__hook { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.1rem, 0.98rem + 0.3vw, 1.28rem); line-height: 1.45; color: var(--sc-ink); text-wrap: pretty; }
.sx-more > p { margin: 0; color: var(--sc-ink); max-width: 62ch; text-wrap: pretty; }
.sx-more > p + p { margin-top: var(--sc-4); }
.sx-row__note { margin: 0; max-width: 62ch; padding-left: var(--sc-4); border-left: 1px solid var(--sc-hairline-strong); font-size: var(--sc-t-sm); line-height: 1.6; color: var(--sc-ink-soft); text-wrap: pretty; }
.sx-row__ticks { gap: var(--sc-3); }
.sx-nw { white-space: nowrap; }
.sx-row__go { justify-self: start; margin-top: var(--sc-2); text-wrap: balance; }
@media (hover: hover) and (pointer: fine) {
  .sx-row:hover .sx-row__img img { transform: scale(1.03); }
  .sx-row__t a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
}
/* from 721px the rest of each entry is open and its "Read more" line is not shown */
@media (min-width: 721px) { .sx-more[open] > summary { display: none; } }
@media (max-width: 1100px) { .sx-row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) auto; } }
/* phone: the room as a thumbnail beside the number and name, the words full width under it */
@media (max-width: 720px) {
  .sx-row {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    grid-template-areas: "img k" "img t" "text text";
    grid-template-rows: auto 1fr auto;
    gap: var(--sc-2) var(--sc-4);
    padding-block: var(--sc-5) var(--sc-6);
  }
  .sx-row__t { align-self: start; font-size: var(--sc-t-lg); line-height: 1.2; }
  .sx-row__text { margin-top: var(--sc-3); max-width: none; }
  .sx-row__k { align-self: end; justify-self: start; }
  .sx-more > summary { min-height: 44px; align-items: flex-end; }
  .sx-more[open] > summary + p { margin-top: var(--sc-4); }
}
@media (prefers-reduced-motion: reduce) { .sx-row__img img { transition: none; } }

/* 6 · the room-rental link under its two paragraphs: it is the entry's last line on
   live, so it sits a paragraph-and-a-half under them, not a device's 64px */
#practitioners .split__copy > .sx-go { margin: var(--sc-6) 0 0; }

/* 7 · the close beside its headline (LastChapter renders the head; the footer spans) */
#start > .sc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(2rem, 6vw, 7rem); align-items: start; }
#start > .sc-wrap > .foot { grid-column: 1 / -1; }
#start .ch-head h2 { max-width: 12ch; }
.sx-close { padding-top: calc(var(--label-size) * 2.4); }
@media (max-width: 860px) {
  #start > .sc-wrap { grid-template-columns: minmax(0, 1fr); }
  .sx-close { padding-top: 0; margin-top: var(--sc-6); }
}

/* 1 · the Glance index lists the services (01–07, matching the rows below), not chapters.
   Tabular digits in a fixed box so the eight names start on one line (proportional
   "01" is narrower than "04", which walked the names 1–4px right). */
#glance .svc-glance__index { counter-reset: svc; }
#glance .svc-glance__index a::before { min-width: 2.2em; font-variant-numeric: tabular-nums; }
/* no foot line here (it repeated the close word for word), so on phones the CTAs sit
   under the facts' own last rule instead of under a second rule 64px lower */
@media (max-width: 860px) { #glance .svc-glance__foot { margin-top: var(--sc-6); padding-top: 0; border-top: 0; } }

/* 5 · the address line under the house photo: a readable measure, body size */
/* "Visit us" sits on the first line's baseline, not 5px above it */
#why .plate__cap { align-items: baseline; }
#why .plate__cap > span:not(.label) { max-width: 58ch; font-size: var(--sc-t-base); line-height: 1.6; color: var(--sc-ink); text-wrap: pretty; }

/* 3 · the big lede runs four lines, not five, over the three lists */
#brings .ch-lede > p.ch-lede__big { max-width: 38ch; }