/* Design-system checkpoint, October 2026. Prototype only.
   This final layer owns visual tokens and recurring components. Existing
   journey styles retain layout/behavior; v1 remains an independent study.
   Platform colors are independent of the optional tenant wordmark accent. */
:root {
  --platform-paper: #f7f8fa;
  --platform-surface: #ffffff;
  --platform-ink: #20283b;
  --platform-muted: #586174;
  --platform-action: #304fc4;
  --platform-action-hover: #233c9f;
  --platform-soft: #edf1ff;
  --platform-rule: #d6dce6;
  --platform-memory: #ffe7d6;
  --platform-voice: #e2edff;
  --platform-milestone: #f8df8f;
  --platform-apricot: #ffe0ca;
  --platform-gold: #e9ad35;
  --platform-positive: #245d46;
  --platform-positive-soft: #e8f4ec;
  --platform-error: #a22c32;
  --platform-input: #8590a5;
  --font-story: 'Source Serif 4', Georgia, serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --radius-card: 10px;
  --radius-control: 6px;
  --color-highlight: var(--platform-gold);
}

/* Sans for tasks and conversation; serif for welcome, stories and reading. */
body { letter-spacing: 0; line-height: 1.6; }
h1,h2,h3 { letter-spacing: -.025em; font-weight: 600; }
h1,.page-heading h1 { font-size: clamp(34px, 3.6vw, 46px); line-height: 1.15; }
.welcome h1,.archive-heading h1,.join-shell h1,.letter-page h1,.about-page h1 {
  font-family: var(--font-story); font-weight: 500; letter-spacing: -.035em;
}
.home-story-copy h2,.home-intro-title,.archive-tile h3,.small-letter h3,
.item-context #dialog-title,.letter-preview h2 { font-family: var(--font-story); font-weight: 500; }
.page-heading>p:last-child { color: var(--platform-muted); line-height: 1.65; }
.eyebrow { font-size: 11px; letter-spacing: .1em; font-weight: 700; }
.person-name { color: var(--platform-ink); font-weight: 600; }
.search-label { font-size: 14px; font-weight: 600; }
.section-top h2 { font-size: 26px; }

/* Stable, unmistakable navigation and actions. */
.site-header { border-top: 4px solid var(--platform-ink); border-bottom-color: var(--platform-rule); background: white; }
.wordmark { color: var(--platform-ink); }
.wordmark span { color: var(--tenant-accent); }
.primary-nav a { color: var(--platform-muted); }
.primary-nav a[aria-current=page] { background: var(--platform-soft); color: var(--platform-action); }
.primary-nav a[aria-current=page]::after { content: ''; position: absolute; bottom: 2px; left: 12px; right: 12px; height: 2px; background: var(--platform-action); }
.button { font-weight: 600; padding: 11px 18px; min-height: 48px; }
.button.secondary { background: white; border-color: var(--platform-input); }
.button.secondary:hover { background: var(--platform-soft); border-color: var(--platform-action); }
.text-link { font-weight: 600; }
.mini-avatar { background: var(--platform-apricot); border-color: #e8b999; color: var(--platform-ink); }
.avatar { background: #f6d5bd; color: #613d29; border-color: #20283b14; }
.filter-bar .chip { border-color: var(--platform-input); background: white; font-weight: 500; }
.filter-bar .chip[aria-pressed=true] { background: var(--platform-ink); border-color: var(--platform-ink); color: white; }
.filter-bar .chip:hover { border-color: var(--platform-action); }
.tag { background: var(--platform-soft); color: var(--platform-action); }
.year-tag { background: #fce5ad; color: #67430c; }
.search-input,.archive-search-row .search-input,.archive-select,textarea,
.join-form input:not([type=radio]):not([type=checkbox]) {
  background: white; border: 1px solid var(--platform-input); border-radius: var(--radius-control); color: var(--platform-ink);
}
input::placeholder,textarea::placeholder { color: #697387; opacity: 1; }
:is(a,button,input,textarea,select,summary):focus-visible,.join-form input:focus-visible {
  outline: 3px solid var(--platform-action); outline-offset: 3px;
}
.form-error,.join-error { color: var(--platform-error); }

/* A few purposeful color fields, surrounded by clear white surfaces. */
.home-story,.people-feature,.request-card { box-shadow: 0 2px 5px #20283b05; }
.people-feature { border-top: 3px solid var(--platform-action); }
.home-story-image,.item-media { background: #edf0f5; }
.home-story-text { background: var(--platform-memory); }
.home-story-copy>p:not(.tile-meta) { color: #444e60; }
.home-archive,.archive-grid.mosaic { gap: 24px; }
.archive-tile { border-radius: 8px; box-shadow: 0 3px 6px #20283b08; }
.piece-memory { border-color: #e9c8b0; }
.piece-memory h3 { font-family: var(--font-body); font-weight: 600; }
.piece-transcript { border-color: #c1d2ee; }
.piece-document { background: #fff7e6; border-color: #e8d7b6; }
.piece-milestone { border-color: #ddc26e; }
.milestone-year,.detail-year { color: #6c4914; }
.voice-lines { color: #365a98; }
.archive-stamp { background: var(--platform-apricot); border: 1px solid #e6b894; color: #744122; }
.invite-note { background: var(--platform-apricot); border-color: #e6b894; }
.gathering-lead { background: #ffedb7; border-color: #e4c66f; }
.gathering-date>strong { color: #735017; }
.gathering-date .tag { color: #62481e; border-color: #c9a85e; }
.gathering-facts { border-color: #dbc076; }
.disclosure-preview,.join-preview,.join-privacy,.overlap-note,.membership-note {
  background: var(--platform-soft); border-color: #bdcbee; color: var(--platform-ink);
}
.disclosure-preview,.join-privacy { border-left: 3px solid var(--platform-action); }
.connection-success { background: var(--platform-positive-soft); border: 1px solid #b6d1c0; }
.contact-address { border-color: #90b79f; }
.reviewing-recipient #recipient-identity { background: var(--platform-soft); }
.prototype-note { background: #eef1f5; color: var(--platform-muted); }
.site-footer { border-top-color: var(--platform-rule); }

/* Community is a shared conversation surface, not a gallery of cards. */
.board-heading { align-items: end; margin-bottom: var(--space-4); }
.board-heading h1 { font-size: clamp(32px, 3.5vw, 44px); max-width: 24ch; }
.board-heading .eyebrow { color: #9a4523; }
.board-audience { white-space: nowrap; font-size: 12px; padding-bottom: 5px; color: var(--platform-muted); }
.board-layout { grid-template-columns: minmax(0, 790px) minmax(220px, 1fr); gap: var(--space-4); align-items: start; }
.conversation-feed { background: white; border: 1px solid var(--platform-rule); border-radius: 10px; padding: 0 var(--space-4); }
.board-compose { display: flex; align-items: center; gap: 14px; padding: 26px 0; text-decoration: none; border-bottom: 1px solid var(--platform-rule); }
.compose-mark { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; background: var(--platform-soft); color: var(--platform-action); font-size: 26px; }
.board-compose>span:nth-child(2) { flex: 1; }
.board-compose strong,.board-compose>span:nth-child(2)>span { display: block; }
.board-compose strong { font-size: 16px; }
.board-compose>span:nth-child(2)>span { color: var(--platform-muted); font-size: 13px; margin-top: 3px; }
.compose-action { color: var(--platform-action); font-size: 13px; font-weight: 600; white-space: nowrap; }
.board-compose:hover strong,.board-compose:hover .compose-action { text-decoration: underline; }
.board-filter { padding: 22px 0 0; margin: 0; border: 0; }
.board-filter h2 { font: 600 14px/1.5 var(--font-body); letter-spacing: 0; }
.board-filter .quiet-caption { font-size: 12px; }
.board-post { border: 0; border-bottom: 1px solid var(--platform-rule); border-radius: 0; box-shadow: none; background: transparent; margin: 0; padding: 26px 0; overflow: visible; }
.board-post:last-child { border-bottom: 0; }
.board-post>header { padding: 0; gap: 14px; }
.board-post>header a:hover { text-decoration: underline; }
.board-post>header>div>span { font-size: 12px; margin-top: 2px; }
.board-post .avatar { width: 42px; height: 42px; }
.post-content { padding-left: 56px; }
.post-content>p { margin: 12px 0 16px; font-size: 16px; line-height: 1.7; max-width: 65ch; }
.post-content>footer { display: flex; gap: 20px; justify-content: space-between; align-items: center; margin: 6px 0 0; }
.post-content>footer a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; font-weight: 600; color: var(--platform-action); text-decoration: none; }
.post-content>footer a:hover { text-decoration: underline; }
.post-content .acknowledge { margin: 0; }
.post-photo { width: 230px; max-width: 100%; border: 1px solid var(--platform-rule); border-radius: 6px; overflow: hidden; text-decoration: none; background: white; }
.post-photo img { width: 100%; height: 112px; object-fit: cover; }
.post-photo>span { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; padding: 8px 12px; color: var(--platform-action); }
.post-photo:hover { border-color: var(--platform-action); }
.post-attachment { margin: 0; max-width: 440px; gap: 14px; background: #f7f8fc; border-color: var(--platform-rule); }
.post-attachment>img { width: 88px; height: auto; flex-shrink: 0; }
.post-attachment>span { padding: 12px 12px 12px 0; gap: 4px; }
.post-attachment .eyebrow { font-size: 10px; }
.post-attachment strong { font-size: 14px; line-height: 1.4; }
.post-attachment:hover { border-color: var(--platform-action); }
.reply-preview { border-left: 2px solid #c8d4f5; margin: 10px 0 0; padding: 8px 0 8px 16px; }
.reply-preview-label { font-size: 11px; color: var(--platform-muted); margin: 0 0 8px; }
.conversation-reply { display: flex; align-items: start; gap: 10px; }
.reply-avatar { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; background: #e8edfa; border-radius: 50%; color: #40537d; font-size: 12px; font-weight: 600; }
.conversation-reply strong { font-size: 13px; }
.conversation-reply p { font-size: 14px; line-height: 1.65; margin: 3px 0 0; color: #465166; }
.board-aside { padding: 0; }
.board-welcome { background: var(--platform-apricot); border-radius: 8px; padding: 22px 24px 26px; }
.community-symbol { display: block; color: #9a4523; font: 600 72px/.9 var(--font-story); height: 45px; }
.board-welcome h2 { font: 500 28px/1.2 var(--font-story); letter-spacing: -.03em; }
.board-welcome p { font-size: 14px; line-height: 1.75; margin-top: 16px; color: #67452f; }
.board-guidance { margin: 24px 0 12px; padding: 0 0 20px; border: 0; border-bottom: 1px solid var(--platform-rule); background: transparent; border-radius: 0; }
.board-guidance strong { font-size: 14px; }
.board-guidance p { font-size: 13px; color: var(--platform-muted); }
.board-aside>.text-link { font-size: 13px; margin: 0; }
.home-board { padding: 28px; border: 1px solid var(--platform-rule); border-radius: 10px; background: white; }
.home-board .section-top { padding: 0; border: 0; }
.home-board .section-top .eyebrow { color: #9a4523; }
.home-board-posts { gap: 32px; }
.compact-post { padding: 12px 0 0; border: 0; }
.compact-post .post-content { padding-left: 0; }
.compact-post .post-content>p { font-size: 15px; }
.compact-post+.compact-post { border-left: 1px solid var(--platform-rule); padding-left: 28px; }
dialog[data-kind=post] { max-width: 740px; }
dialog[data-kind=post] #dialog-title { font-size: 30px; }
.thread-audience { color: var(--platform-muted); font-size: 13px; margin: 8px 0 0; }
.thread-post { padding-bottom: 8px; border-bottom: 0; }
.thread-post .post-content { padding-left: 0; }
.conversation-photo img { width: 100%; height: auto; max-height: 420px; object-fit: contain; border-radius: 6px; background: #edf0f5; }
.post-replies { border-top: 1px solid var(--platform-rule); margin-top: 16px; }
.post-replies h3 { font: 600 16px/1.4 var(--font-body); margin: 24px 0 20px; letter-spacing: 0; }
.post-replies article { border: 0; padding: 0; margin: 0 0 22px; }
.post-replies article p { margin-top: 4px; font-size: 15px; }
.post-replies .quiet-caption { border-top: 1px solid var(--platform-rule); padding-top: 18px; }
.review-chip { border-color: var(--platform-rule); color: var(--platform-muted); }
.review-chip:hover { color: var(--platform-action); background: var(--platform-soft); }
#review-panel { color: var(--platform-ink); border-color: var(--platform-input); }
#review-panel a { color: var(--platform-action); }
#review-panel button { background: var(--platform-paper); border-color: var(--platform-rule); }
#review-panel select { color: var(--platform-ink); border-color: var(--platform-input); }
.review-disclaimer { color: var(--platform-muted); }

@media(max-width:1050px) {
  .board-layout { grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; }
  .conversation-feed { padding: 0 24px; }
  .board-compose { flex-wrap: wrap; }
  .compose-action { margin-left: 56px; }
}
@media(max-width:900px) {
  .board-layout { grid-template-columns: minmax(0, 1fr); }
  .board-aside { max-width: none; }
  .board-welcome { display: none; }
  .board-guidance { margin-top: 0; }
  .board-heading { align-items: start; flex-direction: column; gap: 14px; }
  .home-board-posts { grid-template-columns: 1fr; gap: 20px; }
  .compact-post+.compact-post { border: 0; border-top: 1px solid var(--platform-rule); padding: 24px 0 0; }
}
@media(max-width:760px) {
  .site-header { border-top-width: 3px; }
  .welcome h1,.archive-heading h1 { font-size: 36px; }
  .board-heading h1 { font-size: 34px; }
  .board-heading { margin-bottom: 24px; }
  .conversation-feed { padding: 0 18px; }
  .board-compose { display: grid; grid-template-columns: 36px minmax(0,1fr); padding: 20px 0; gap: 6px 12px; }
  .compose-mark { width: 36px; height: 36px; grid-row: span 2; align-self: start; }
  .board-compose>span:nth-child(2)>span { font-size: 12px; }
  .compose-action { grid-column: 2; margin-left: 0; }
  .board-filter { align-items: start; flex-direction: column; gap: 2px; }
  .board-post { padding: 24px 0; }
  .board-post>header { padding: 0; gap: 12px; }
  .post-content { padding-left: 0; }
  .post-content>p { font-size: 16px; margin: 14px 0; }
  .post-content>footer { gap: 8px; }
  .post-content>footer a { font-size: 12px; gap: 5px; }
  .post-attachment { gap: 10px; margin: 0; }
  .post-attachment>img { width: 72px; }
  .post-attachment strong { font-size: 13px; }
  .post-attachment>span { padding: 10px 10px 10px 0; }
  .post-attachment span>span:last-child { font-size: 11px; }
  .reply-preview { padding-left: 12px; }
  .home-board { padding: 22px 18px; }
  .home-board .section-top { align-items: start; }
  .home-board .section-top h2 { font-size: 23px; }
  .home-board .section-top .eyebrow { max-width: 23ch; font-size: 10px; }
  .home-board-posts { gap: 0; }
  .home-board .compact-post { padding: 20px 0; }
  .home-board .compact-post:last-child { padding-bottom: 0; }
  .home-archive,.archive-grid.mosaic { gap: 18px; }
}