/* ============================================================================
   about.css
   ----------------------------------------------------------------------------
   Page-specific styles only. The shared shell (colour tokens, base type, skip
   link, hero, nav, footer) lives in site.css, which every page loads first.
   site.css is generated: edit it in the root repo's _shared/ and run sync.py,
   never here.
   ========================================================================== */

:root{
  /* prose, not images */
  --maxw:840px;
}

h2{
  font-size:clamp(23px,3.6vw,30px);
  line-height:1.25;margin:56px 0 14px;font-weight:650;letter-spacing:-.01em;color:#f0f6fb;
}

/* ---------- opening: portrait beside the first words ---------- */
.opening{
  display:grid;grid-template-columns:minmax(0,340px) 1fr;
  gap:36px;align-items:start;
  margin-top:52px;
}
@media(max-width:700px){
  .opening{grid-template-columns:1fr}
  .portrait{max-width:340px;margin:0 auto}
}
.portrait{margin:0}
.portrait .frame{
  display:block;overflow:hidden;line-height:0;
  border-radius:12px;border:1px solid var(--border);
  background:var(--bg-soft);
}
.portrait img{width:100%;height:auto;display:block}
.portrait figcaption{
  color:var(--muted);font-size:14px;line-height:1.55;margin-top:10px;
}
.lede{font-size:19px}
.lede p:first-child{margin-top:-4px}

/* ---------- cards to the other sites ---------- */
.site-list{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:18px;margin:26px 0 0;padding:0;list-style:none;
}
.site-card{
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  overflow:hidden;display:flex;flex-direction:column;height:100%;
}
.site-card:hover{border-color:#2a3d55}
.site-card .thumb{line-height:0;border-bottom:1px solid var(--border)}
.site-card .thumb img{width:100%;height:180px;object-fit:cover;display:block}
.site-card .body{padding:18px 20px 20px}
.site-card h3{margin:0 0 6px;font-size:18px;font-weight:650;color:#e6eef6}
.site-card h3 a{color:inherit;border:0}
.site-card h3 a:hover{color:var(--green)}
.site-card p{margin:0;font-size:14px;color:var(--muted);line-height:1.6}

/* ---------- meditation page: banner ---------- */
.banner{margin:44px 0 0}
.banner img{
  width:100%;height:auto;display:block;
  border-radius:14px;border:1px solid var(--border);
}
.banner figcaption{
  color:var(--muted);font-size:14px;line-height:1.55;margin-top:10px;
}

/* ---------- meditation page: register button + practical details ----------
   The button always points at the gm redirect, never at a Meetup event URL. */
.cta{
  display:inline-block;margin:4px 0 8px;
  background:var(--green);color:#06210f;
  border:0;border-radius:100px;
  padding:12px 26px;font-weight:650;font-size:15px;
  transition:background .15s;
}
.cta:hover{background:var(--teal);color:#06210f}

.facts{
  display:grid;grid-template-columns:max-content 1fr;gap:8px 22px;
  margin:26px 0 0;padding:20px 22px;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;
  font-size:15px;
}
.facts dt{color:var(--muted);font-weight:600}
.facts dd{margin:0}
@media(max-width:520px){
  .facts{grid-template-columns:1fr;gap:0}
  .facts dd{margin:0 0 12px}
  .facts dd:last-child{margin-bottom:0}
}