/* /first-meeting — the page's own pieces, on top of /page.css.
   Loaded after it; every token here is page.css's. No inline styles (the
   CSP is style-src 'self'), and motion stays a transform. */

/* ---------- First time? ----------
   Six plain facts on the home page's hairline grid (its .proof): cells of
   ground on a hairline, one rounded frame round the lot. */

.doc > .first-grid { margin-top: 28px; }
.first-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
}
.first-grid > li {
  position: relative;
  padding: 20px 22px 20px 48px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)), var(--ground);
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  text-wrap: pretty;
}
/* The ticker's diamond, in the ramp. */
.first-grid > li::before {
  content: "";
  position: absolute;
  left: 22px; top: calc(20px + 0.75em - 4px);
  width: 8px; height: 8px;
  background: var(--ramp);
  border-radius: 1px;
  transform: rotate(45deg);
}
@media (min-width: 640px) {
  .first-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .first-grid > li { padding: 58px 26px 26px; }
  .first-grid > li::before { left: 27px; top: 28px; }
}
@media (min-width: 1080px) {
  .doc > .first-grid { grid-column: 1 / -1; margin-top: 32px; }
  .first-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .first-grid > li { padding: 64px 30px 30px; font-size: 1.125rem; }
  .first-grid > li::before { left: 31px; top: 32px; }
}
.first-grid + p { margin-top: 28px; }

/* ---------- How an online room works ----------
   page.css's numbered hairline rows (.steps) with no bold lead-in: the
   numbers are the only accent, as in the home page's four moves. */

.online-steps > li { color: var(--ink-2); }

/* ---------- 90 in 90 ----------
   page.css's set-apart panel (.pull), with the heading at the size of the
   home page's big numbers. */

@media screen {
  :where(.doc) .ninety h2, .ninety h2 {
    font-size: clamp(4.2rem, 10.5vw, 9rem);
    line-height: 0.86;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    /* The contents link lands on the panel, not on the heading inside it:
       the panel's own top padding (page.css .pull) plus its border. */
    scroll-margin-top: calc(clamp(36px, 6vw, 88px) + 1px);
  }
}

/* ---------- Find a meeting ----------
   On a phone, page.css's hairline rows. From 720px, each fellowship is a
   panel, two to a row, as the rooms are on /for-family: the name and who it
   is for at the top, its own list and phone at the foot. */

@media (min-width: 720px) {
  .finders {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    border-top: 0;
  }
  .finders > li {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    padding: clamp(24px, 2.6vw, 32px);
    border: 1px solid var(--line);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  }
  /* No hover on the panel: unlike /for-family's rooms, the panel itself is
     not a link, only the links at its foot are. */
  .finders .finder-name { font-size: clamp(1.5rem, 2.1vw, 1.9rem); font-stretch: 75%; line-height: 1; letter-spacing: -0.012em; }
  .finders .finder-for { margin-top: 8px; }
  .finders .finder-go { margin-top: auto; }
  .doc > .finders + .fine { margin-top: 24px; }
}

/* ---------- The last word ---------- */

.doc > .coda { margin-top: clamp(72px, 9vw, 120px); }
.coda { padding-top: 32px; border-top: 1px solid var(--line); }
.coda-line {
  max-width: 24ch;
  font-family: var(--display);
  font-stretch: 75%;
  font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.02;
  letter-spacing: -0.018em;
  color: var(--ink);
  text-wrap: balance;
}
.coda-line + p { margin-top: 22px; }

/* ---------- Print ---------- */

@media print {
  .first-grid { border-radius: 6pt; break-inside: avoid; }
  .first-grid > li, .first-grid > li:nth-child(n) { padding: 6pt 8pt 6pt 20pt; font-size: 10.5pt; background: #fff; }
  .first-grid > li::before { left: 8pt; top: 10pt; width: 5pt; height: 5pt; }
  .online-steps > li { padding: 5pt 0 5pt 28pt; }
  .finders { display: block; border-top: 0.75pt solid #b8b8b8; }
  .finders > li { display: grid; gap: 2pt 12pt; padding: 6pt 0; border: 0; border-bottom: 0.75pt solid #b8b8b8; border-radius: 0; background: none; }
  .finders .finder-name { font-size: 12pt; }
  .finders .finder-for { margin-top: 1pt; }
  .doc > .coda { margin-top: 20pt; padding-top: 10pt; }
  .coda-line { max-width: none; font-size: 14pt; }
}