@import url('https://fonts.googleapis.com/css2?family=DM+Mono&family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Manrope:wght@400;500;600;700&display=swap');
:root { color: #1d3027; background: #f5f1e8; font-family: Manrope, sans-serif; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 1040px; margin: auto; padding: 76px 28px 100px; }
.hero { padding: 0 0 58px; } .eyebrow { margin: 0 0 10px; color: #687e6a; font: 11px/1.2 'DM Mono', monospace; letter-spacing: .11em; text-transform: uppercase; }
h1,h2,h3 { font-family: Fraunces, serif; letter-spacing: -.035em; } h1 { font-size: clamp(3.7rem, 10vw, 7.7rem); font-weight: 500; line-height: .86; margin: 0; color: #263e31; } h2 { font-size: 2rem; margin: 0; font-weight: 500; } h3 { font-size: 1.55rem; margin: 20px 0 9px; font-weight: 500; }
.intro { color: #536658; margin: 22px 0 0; max-width: 410px; line-height: 1.65; }
.composer { display: grid; gap: 26px; grid-template-columns: minmax(190px, .68fr) 1.32fr; padding: 35px; background: #dce6cf; border-radius: 3px; box-shadow: 8px 8px 0 #b8c8aa; } form { display: grid; gap: 16px; } label { display: grid; gap: 7px; font-size: .78rem; font-weight: 700; color: #435e4a; }
input,textarea { width: 100%; border: 1px solid #adc1a9; border-radius: 2px; background: #fbfaf6; color: #20362a; padding: 12px 13px; font: 400 .95rem/1.5 Manrope, sans-serif; resize: vertical; } input:focus, textarea:focus { outline: 3px solid #f0c56b; outline-offset: 1px; }
.form-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 39px; } button { border: 0; border-radius: 2px; padding: 11px 17px; background: #284d39; color: white; cursor: pointer; font: 700 .78rem Manrope, sans-serif; letter-spacing: .01em; } button:hover { background: #1c392a; } button:disabled { cursor: wait; opacity: .65; } #idea-status,.comment-status { color: #506d57; font-size: .78rem; }
.board { margin-top: 90px; }.board-heading { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid #c9cec0; padding-bottom: 19px; }.count { color: #758278; font: 11px 'DM Mono', monospace; }
.ideas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 25px; }.idea-card { background: #fffdf8; padding: 26px; border: 1px solid #e1ddd2; border-radius: 2px; }.idea-top { display: flex; justify-content: space-between; color: #77847b; font: 10px 'DM Mono', monospace; }.description { margin: 0; white-space: pre-wrap; color: #536058; font-size: .92rem; line-height: 1.65; }.comments { margin-top: 23px; display: grid; gap: 8px; }.comment { margin: 0; padding: 10px 12px; border-left: 2px solid #d7c77b; background: #f7f4e9; color: #536058; font-size: .84rem; line-height: 1.5; white-space: pre-wrap; }.comment-form { margin-top: 17px; grid-template-columns: 1fr auto; align-items: end; }.comment-form textarea { font-size: .82rem; padding: 9px; }.comment-status { grid-column: 1 / -1; }.empty { grid-column: 1 / -1; color: #718074; margin: 25px 0; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
@media (max-width: 700px) { main { padding: 48px 18px 70px; }.composer { grid-template-columns: 1fr; padding: 25px; }.ideas { grid-template-columns: 1fr; }.board { margin-top: 68px; } }