:root {
  color: #18382e;
  background: #f3f5ef;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
main { max-width: 1260px; margin: auto; padding: 2rem clamp(1rem, 4vw, 4rem) 5rem; }
main a { color: #245b43; }
label { display: block; font-size: .88rem; font-weight: 750; }
label span { color: #62766c; font-weight: 450; }
input, select, textarea { display: block; width: 100%; margin-top: .4rem; padding: .8rem; border: 1px solid #a9b9ae; border-radius: .65rem; background: #fff; color: inherit; }
textarea { resize: vertical; }
button { padding: .7rem 1rem; border: 1px solid #9fb2a5; border-radius: .65rem; background: #fff; color: #204f3a; font-weight: 750; }
button:disabled { cursor: wait; opacity: .6; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #efac4e; outline-offset: 3px; }
.eyebrow { margin: 0 0 .5rem; color: #47775b; font-size: .72rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.community-hero, .detail-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 360px); gap: 2rem; align-items: end; padding: 2.5rem 0 3rem; }
.community-hero h1, .detail-hero h1 { max-width: 850px; margin: .5rem 0 1rem; font-size: clamp(2.4rem, 5.2vw, 4.8rem); line-height: 1; letter-spacing: -.045em; overflow-wrap: anywhere; }
.detail-hero h1 { font-size: clamp(2.2rem, 4.3vw, 3.8rem); }
.hero-lede, #project-byline { max-width: 700px; font-size: clamp(1.05rem, 1.7vw, 1.3rem); line-height: 1.65; }
.boundary-note { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1px solid #b9cbbb; border-radius: 1rem; background: #edf4e9; line-height: 1.55; }
.primary-link, .secondary-link { display: inline-block; padding: .78rem 1rem; border-radius: .65rem; font-weight: 800; text-decoration: none; }
.primary-link { background: #174a37; color: #fff; }
.secondary-link { border: 1px solid #9fb2a5; background: #fff; }
.discovery, .workspace, .detail-card, .account-detail, .project-types { padding: clamp(1rem, 3vw, 2rem); border: 1px solid #d3dfd3; border-radius: 1.2rem; background: #fff; }
.project-types { margin-bottom: 2rem; }
.project-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.project-type-grid article { padding: 1.2rem; border-radius: 1rem; background: #f6f9f4; }
.project-type-grid h3 { margin: .7rem 0 .5rem; font-size: 1.25rem; }
.project-type-grid p, .discussion-note { line-height: 1.65; }
.discussion-note { margin: 1rem 0 0; padding: 1rem; border-left: 4px solid #80629a; background: #f4f0fa; }
.section-heading { display: flex; gap: 1rem; align-items: end; justify-content: space-between; }
.section-heading h2, .workspace h2, .detail-card h2 { margin: .2rem 0 .8rem; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.filter-grid { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.community-project-card, .my-project-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.25rem; border: 1px solid #d3dfd3; border-radius: 1rem; background: #f9fbf7; }
.community-project-card h3, .my-project-card h4 { margin: 0; font-size: 1.25rem; line-height: 1.25; overflow-wrap: anywhere; }
.community-project-card p, .my-project-card p { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.card-top, .card-meta, .form-heading, .form-actions, .my-project-actions { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; justify-content: space-between; }
.category-pill, .stage-pill, .workflow-pill, .type-pill { display: inline-block; width: fit-content; padding: .3rem .6rem; border-radius: 999px; background: #dcebdc; color: #315f42; font-size: .75rem; font-weight: 850; }
.stage-pill { background: #e3edf8; color: #315978; }
.workflow-pill { background: #f5e7cd; color: #75501d; }
.type-pill { background: #eee5f8; color: #5f3d78; }
.card-meta { justify-content: flex-start; color: #62766c; font-size: .82rem; }
.card-link { margin-top: auto; font-weight: 800; }
.status-message { line-height: 1.6; }
.status-message > p { margin: 0; }
.directory-state { padding: 1.25rem; border: 1px dashed #9fb2a5; border-radius: 1rem; background: #f6f9f4; }
.directory-state h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.directory-state p { margin: 0; }
.directory-state-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: 1rem; }
.secondary-action { display: block; margin: 1.5rem auto 0; }
.workspace { margin-top: 2rem; }
#account-gate { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #d3dfd3; border-radius: 1rem; background: #f6f9f4; line-height: 1.6; }
#account-gate h3 { margin-top: 0; }
#account-gate form { max-width: 480px; margin-top: 1rem; }
#account-gate label { margin-bottom: 1rem; }
.workspace-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 1.5rem; align-items: start; }
.project-form, .my-projects { padding: 1.25rem; border: 1px solid #d3dfd3; border-radius: 1rem; background: #f9fbf7; }
.project-form label { margin-top: 1rem; }
.project-form h3, .my-projects h3 { margin: 0; }
.project-form fieldset { margin: 1rem 0 0; padding: 1rem; border: 1px solid #c8d6c9; border-radius: .8rem; }
.project-form legend { padding: 0 .35rem; font-weight: 800; }
.proposal-choice { display: flex; flex-wrap: wrap; gap: 1rem; }
.proposal-choice label { display: flex; gap: .45rem; align-items: center; }
.proposal-choice input { width: auto; margin: 0; }
.ai-draft-panel { margin-top: 1rem; padding: 1rem; border: 1px solid #bbcfbd; border-radius: .8rem; background: #eef5ec; }
.origin-guide-context { margin-top: 1rem; padding: 1rem; border-left: 4px solid #80629a; border-radius: .3rem .8rem .8rem .3rem; background: #f4f0fa; line-height: 1.55; }
.origin-guide-context p { margin: .4rem 0 .7rem; }
.origin-guide-context button { margin-left: .7rem; }
.ai-draft-panel h4, .ai-draft-panel h5 { margin: 0 0 .5rem; }
.ai-draft-panel p { line-height: 1.55; }
#ai-draft-notes { margin-top: .8rem; padding: .8rem; border-radius: .65rem; background: #fff; }
#ai-draft-notes ul { margin: .35rem 0 1rem; padding-left: 1.2rem; }
#policy-fields { background: #f4f0fa; }
#my-project-list { display: grid; gap: .8rem; }
.my-project-card { background: #fff; }
.primary-action { border-color: #174a37; background: #174a37; color: #fff; }
.form-actions span { color: #62766c; font-size: .8rem; line-height: 1.5; }
.honeypot, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.back-link { display: inline-block; margin: .5rem 0 1rem; font-weight: 800; text-decoration: none; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 1.25rem; align-items: start; }
.detail-grid > div { display: grid; gap: 1.25rem; }
.detail-grid aside { display: grid; gap: 1.25rem; }
.detail-card p { white-space: pre-wrap; line-height: 1.7; overflow-wrap: anywhere; }
.detail-card h2:not(:first-child) { margin-top: 2rem; }
.policy-facts { display: grid; gap: .3rem; }
.policy-facts dt { margin-top: .5rem; color: #62766c; font-size: .8rem; font-weight: 800; }
.policy-facts dd { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.boundary-copy { padding: .75rem; border-left: 4px solid #80629a; background: #f4f0fa; }
.origin-guide-card { background: #f4f0fa; }
.project-facts dl { display: grid; gap: .35rem; margin-bottom: 0; }
.project-facts dt { margin-top: .6rem; color: #62766c; font-size: .8rem; font-weight: 800; }
.project-facts dd { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.team-member, .progress-update { margin-top: .8rem; padding: .85rem; border-radius: .75rem; background: #f2f6ef; }
.team-member strong { display: block; overflow-wrap: anywhere; }
.team-member p, .progress-update p { margin: .3rem 0 0; }
.progress-update time { color: #62766c; font-size: .8rem; }
#join-form, #update-form { margin-top: 1rem; }
#join-form label, #update-form label { margin-bottom: 1rem; }
.account-detail { margin-top: 1.25rem; }
#owner-controls { margin-bottom: 1.25rem; }
.stance-counts, #stance-controls { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: .8rem; }
.stance-counts span { padding: .5rem .7rem; border-radius: .65rem; background: #f2f6ef; }
#stance-controls button[aria-pressed="true"] { border-color: #174a37; background: #174a37; color: #fff; }
#discussion-form { margin: 1rem 0; }
.discussion-comment, .discussion-reply { margin-top: 1rem; padding: 1rem; border: 1px solid #d3dfd3; border-radius: .8rem; background: #f9fbf7; }
.discussion-reply { margin-left: clamp(.5rem, 4vw, 2rem); background: #fff; }
.discussion-meta { color: #62766c; font-size: .84rem; }
.discussion-replies { margin-top: .5rem; }

@media (max-width: 960px) {
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-grid, .detail-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  main { padding-top: 1.25rem; }
  .community-hero, .detail-hero, .filter-grid { grid-template-columns: 1fr; }
  .community-hero, .detail-hero { align-items: start; padding-top: 1.5rem; }
  .project-grid, .project-type-grid { grid-template-columns: 1fr; }
  .section-heading { align-items: start; flex-direction: column; }
  .discovery, .workspace, .detail-card, .account-detail, .project-types { padding: 1rem; }
  .origin-guide-context button { display: block; margin: .7rem 0 0; }
}