/* The public pages (kapable/public-pages.ts): the Kapable design language's tokens with the app's
   green. Loaded after tokens.css. Light and dark follow the visitor's system, with no script.
   design/tokens.css and fonts/inter-subset.woff2 are byte copies from kapable-ui-assets
   design-language 1.47.0.
   Accent values come from the language's formula (DESIGN.md section 7) for #15803d. */
@font-face {
  font-family: 'InterK';
  src: url('/fonts/inter-subset.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  --accent: #15803d;
  --accent-text: #15803d;
  --accent-soft: color-mix(in oklab, #15803d 12%, transparent);
  --accent-wash: color-mix(in oklab, #15803d 12%, transparent);
  --org-accent: #15803d;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent-text: #6ac982;
    --accent-soft: color-mix(in oklab, #15803d 26%, transparent);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-feature-settings: 'cv11', 'ss01';
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: anywhere;
}
a { color: var(--accent-text); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }
.pp-body a, .pp-comment-words a, .pp-video a { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.pp-wrap { max-width: 1160px; margin: 0 auto; padding: 0 28px; }

/* The bar */
.pp-bar { border-bottom: 1px solid var(--line); }
.pp-bar .pp-wrap { display: flex; align-items: center; gap: 8px; min-height: 56px; }
.pp-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--text); font-size: 14px; font-weight: 650; text-decoration: none; }
.pp-brand:hover { text-decoration: none; }
.pp-brand img { width: 28px; height: 28px; border-radius: 8px; }
.pp-nav { display: flex; align-items: center; gap: 2px; margin-right: 10px; }
.pp-nav a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 8px; color: var(--text-2); font-size: 13px; font-weight: 600; text-decoration: none; }
.pp-nav a:hover { background: var(--hover); color: var(--text); text-decoration: none; }

/* Buttons: the language's, with no pill anywhere */
.pp-btn { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line); color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--motion-fast) var(--ease), filter var(--motion-fast) var(--ease); }
.pp-btn:hover { background: var(--press); text-decoration: none; }
.pp-btn.primary { background: var(--accent); color: #fff; box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 1px 2px rgb(0 0 0 / 0.12); }
.pp-btn.primary:hover { filter: brightness(1.07); }

.pp-main { padding: 40px 0 64px; }

/* Type */
.pp-title { font-size: 30px; font-weight: 680; letter-spacing: -0.022em; line-height: 1.2; text-wrap: balance; }
.pp-intro { max-width: 640px; margin-top: 10px; color: var(--text-2); }
.pp-h2 { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.pp-count { margin-left: 6px; color: var(--text-3); font-size: 14px; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pp-meta { color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.pp-meta a { color: var(--text-2); font-weight: 600; text-decoration: none; }
.pp-meta a:hover { color: var(--text); text-decoration: underline; }
.pp-section { margin-top: 44px; }
.pp-section > .pp-h2 { margin-bottom: 14px; }

/* The home page: members' photos and words first */
.pp-lead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; align-items: center; margin-top: 28px; }
.pp-lead-photo { display: block; overflow: hidden; border-radius: 12px; background: var(--surface-3); aspect-ratio: 3 / 2; }
.pp-lead-photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-lead-title { font-size: 22px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.pp-lead-title a { color: var(--text); text-decoration: none; }
.pp-lead-title a:hover { text-decoration: underline; }
.pp-lead-words { margin-top: 10px; color: var(--text-2); }
.pp-lead .pp-by { margin-top: 14px; }
.pp-by { display: flex; align-items: center; gap: 10px; }
.pp-av { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.pp-av.lg { width: 40px; height: 40px; }
span.pp-av { display: grid; place-items: center; color: var(--text); font-size: 10.5px; font-weight: 650; letter-spacing: 0.02em; }
span.pp-av.lg { font-size: 14px; }

.pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.pp-tile-photo { display: block; overflow: hidden; margin-bottom: 12px; border-radius: 12px; background: var(--surface-3); aspect-ratio: 4 / 3; }
.pp-tile-photo img { width: 100%; height: 100%; object-fit: cover; }
.pp-tile-title { font-size: 15px; font-weight: 650; line-height: 1.35; }
.pp-tile-title a { color: var(--text); text-decoration: none; }
.pp-tile-title a:hover { text-decoration: underline; }
.pp-tile-words { display: -webkit-box; overflow: hidden; margin-top: 4px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
.pp-tile .pp-meta { margin-top: 8px; }
.pp-said { gap: 0 24px; border-top: 1px solid var(--line); }
.pp-said .pp-tile { padding: 14px 0 18px; border-bottom: 1px solid var(--line); }

/* Words, one line each: what members do, topics, climates */
.pp-rows { border-top: 1px solid var(--line); }
.pp-rows > li { border-bottom: 1px solid var(--line); }
.pp-do { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; }
.pp-do h3 { font-size: 14px; font-weight: 650; }
.pp-do p { max-width: 640px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.pp-names { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pp-names a { display: inline-block; padding: 3px 0; font-size: 14px; font-weight: 600; }
.pp-names span { margin-left: 5px; color: var(--text-3); font-size: 12.5px; font-weight: 400; font-variant-numeric: tabular-nums; }
.pp-groups .pp-names { margin-top: 18px; }
.pp-comments .pp-h2 { margin-bottom: 10px; }
.pp-joinrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 44px; padding: 16px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.pp-joinrow p { flex: 1 1 280px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.pp-joinrow strong { color: var(--text); font-weight: 650; }

/* A list of posts */
.pp-list { margin-top: 24px; border-top: 1px solid var(--line); }
.pp-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 4px 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.pp-row.bare { grid-template-columns: minmax(0, 1fr); }
.pp-row-title { font-size: 15px; font-weight: 650; line-height: 1.35; }
.pp-row-title a { color: var(--text); text-decoration: none; }
.pp-row-title a:hover { text-decoration: underline; }
.pp-row-words { display: -webkit-box; overflow: hidden; margin-top: 3px; max-width: 660px; color: var(--text-2); font-size: 13.5px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pp-row .pp-meta { margin-top: 6px; }
.pp-row-photo { grid-row: 1 / span 3; grid-column: 2; display: block; overflow: hidden; border-radius: 10px; background: var(--surface-3); aspect-ratio: 4 / 3; }
.pp-row-photo img { width: 100%; height: 100%; object-fit: cover; }

/* A post */
.pp-post { display: grid; grid-template-columns: minmax(0, 720px) 280px; gap: 56px; justify-content: space-between; align-items: start; }
.pp-post-by { margin-top: 14px; }
.pp-post-by .pp-meta { display: block; }
.pp-post-by b { color: var(--text); font-size: 13.5px; font-weight: 600; }
.pp-post-by a { color: var(--text); font-weight: 600; text-decoration: none; }
.pp-post-by a:hover { text-decoration: underline; }
.pp-photos { display: grid; gap: 12px; margin-top: 22px; }
.pp-photos img { width: 100%; max-height: 78vh; object-fit: contain; border-radius: 12px; background: var(--surface-3); }
.pp-body { margin-top: 20px; }
.pp-body p + p { margin-top: 12px; }
.pp-photos + .pp-body { margin-top: 22px; }
.pp-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; margin-top: 20px; color: var(--text-3); font-size: 13px; }
.pp-facts a { font-weight: 600; }
.pp-video { margin-top: 16px; }
.pp-comments { margin-top: 36px; }
.pp-comment { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; padding: 14px 0; border-top: 1px solid var(--line); }
.pp-comment.reply { margin-left: 38px; }
.pp-comment .pp-av { grid-row: 1 / span 2; }
.pp-comment-head { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.pp-comment-head b, .pp-comment-head a { color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.pp-comment-head a:hover { text-decoration: underline; }
.pp-comment-words { font-size: 14px; line-height: 1.5; }
.pp-comment-words p + p { margin-top: 8px; }
.pp-earlier { padding: 10px 0; }
.pp-post-join { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.pp-post-join span { color: var(--text-2); font-size: 13.5px; }
.pp-aside { display: grid; gap: 28px; }
.pp-aside h2 { margin-bottom: 8px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.pp-related a { display: block; padding: 8px 0; border-top: 1px solid var(--line); color: var(--text); font-size: 13.5px; font-weight: 500; line-height: 1.4; text-decoration: none; }
.pp-related a:hover { text-decoration: underline; }

/* A page that is not there, or a read that failed */
.pp-note { max-width: 620px; }
.pp-note p { margin-top: 10px; color: var(--text-2); }
.pp-note-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.pp-foot { border-top: 1px solid var(--line); }
.pp-foot .pp-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding-top: 16px; padding-bottom: 24px; color: var(--text-3); font-size: 12.5px; }
.pp-foot p { margin-right: auto; }
.pp-foot a { display: inline-block; padding: 4px 0; color: var(--text-2); font-weight: 600; text-decoration: none; }
.pp-foot a:hover { color: var(--text); text-decoration: underline; }

@media (max-width: 960px) {
  .pp-post { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .pp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pp-lead { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pp-do { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .pp-wrap { padding: 0 16px; }
  .pp-main { padding: 26px 0 44px; }
  .pp-title { font-size: 26px; }
  .pp-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pp-said { gap: 0; }
  .pp-bar .pp-wrap { flex-wrap: wrap; gap: 4px 6px; padding-top: 6px; padding-bottom: 6px; }
  .pp-brand { min-height: 44px; }
  .pp-nav { order: 3; flex: 1 0 100%; margin: 0 -10px; }
  .pp-nav a { height: 44px; font-size: 14px; }
  .pp-btn { height: 44px; padding: 0 14px; font-size: 15px; }
  .pp-row { grid-template-columns: minmax(0, 1fr) 88px; }
  .pp-comment.reply { margin-left: 20px; }
  .pp-names a { padding: 11px 0; }
  .pp-foot a { padding: 11px 0; }
}