@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;1,9..144,300;1,9..144,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --bg:#F8F5F0;
  --bg2:#F2EDE6;
  --surface:#FFFFFF;
  --surface-warm:#FDFAF6;
  --border:#E5DDD3;
  --border-mid:#CEC5BA;
  --border-strong:#B5A99C;
  --text:#1E1B17;
  --text-mid:#6E6459;
  --text-dim:#A09688;
  --amber:#C17B2A;
  --amber-deep:#9A5E1A;
  --amber-light:#FAF0E0;
  --amber-border:#EDD5A3;
  --need:#B83232;
  --need-bg:#FDF2F0;
  --need-border:#EEC9C4;
  --offer:#27794A;
  --offer-bg:#F0FAF4;
  --offer-border:#B8DFCA;
  --done-fg:#A09688;
  --done-bg:#F5F2EE;
  --r-sm:3px;
  --r:6px;
  --r-lg:10px;
  --r-xl:16px;
  --shadow-sm:0 1px 4px rgba(30,20,10,0.07);
  --shadow:0 3px 14px rgba(30,20,10,0.10);
}

body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;}

h1,h2,h3{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-0.02em;line-height:1.1;color:var(--text);}
h1{font-size:46px;} h2{font-size:26px;} h3{font-size:19px;}
em.serif{font-family:'Fraunces',serif;font-style:italic;color:var(--amber);}
p{line-height:1.65;}

/* NAV */
.ds-nav{display:flex;justify-content:space-between;align-items:center;padding:0 2rem;height:56px;border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:100;}
.ds-logo{display:inline-flex;align-items:center;gap:5px;text-decoration:none;}
.ds-logo-word{font-family:'Fraunces',serif;font-style:italic;font-size:22px;font-weight:400;color:var(--text);letter-spacing:-0.03em;}
.ds-logo-badge{font-size:10px;font-weight:500;background:var(--amber);color:#fff;padding:2px 7px;border-radius:99px;letter-spacing:0.05em;margin-left:2px;font-family:'DM Sans',sans-serif;font-style:normal;}
.ds-nav-links{display:flex;align-items:center;gap:1.25rem;}
.ds-nav-link{font-size:13px;color:var(--text-mid);text-decoration:none;letter-spacing:0.01em;transition:color 0.12s;}
.ds-nav-link:hover{color:var(--text);}
.ds-nav-pill{font-size:12px;font-weight:500;color:#fff;background:var(--amber);border:none;border-radius:99px;padding:6px 16px;cursor:pointer;letter-spacing:0.02em;text-decoration:none;transition:background 0.12s;font-family:'DM Sans',sans-serif;}
.ds-nav-pill:hover{background:var(--amber-deep);}
.ds-avatar{width:32px;height:32px;border-radius:50%;background:var(--amber-light);border:1.5px solid var(--amber-border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:500;color:var(--amber-deep);cursor:pointer;text-decoration:none;flex-shrink:0;transition:border-color 0.12s;}
.ds-avatar:hover{border-color:var(--amber);}
.ds-nav-area{font-size:12px;color:var(--text-dim);letter-spacing:0.03em;}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:'DM Sans',sans-serif;font-size:14px;font-weight:500;border-radius:var(--r);padding:10px 20px;border:none;cursor:pointer;letter-spacing:0.01em;transition:all 0.12s;text-decoration:none;white-space:nowrap;}
.btn-amber{background:var(--amber);color:#fff;} .btn-amber:hover{background:var(--amber-deep);}
.btn-dark{background:var(--text);color:var(--bg);} .btn-dark:hover{opacity:0.88;}
.btn-ghost{background:transparent;color:var(--text-mid);border:1px solid var(--border-mid);}
.btn-ghost:hover{border-color:var(--border-strong);color:var(--text);}
.btn-sm{font-size:12px;padding:7px 13px;}
.btn-lg{font-size:15px;padding:12px 24px;}
.btn-full{width:100%;justify-content:center;}

/* TAGS */
.tag{display:inline-block;font-size:10px;font-weight:500;padding:2px 8px;border-radius:var(--r-sm);letter-spacing:0.06em;text-transform:uppercase;border:1px solid transparent;}
.tag-need{background:var(--need-bg);color:var(--need);border-color:var(--need-border);}
.tag-offer{background:var(--offer-bg);color:var(--offer);border-color:var(--offer-border);}
.tag-urgent{background:var(--amber-light);color:var(--amber-deep);border-color:var(--amber-border);}
.tag-done{background:var(--done-bg);color:var(--done-fg);}
.tag-food{background:var(--offer-bg);color:var(--offer);border-color:var(--offer-border);}
.tag-transport{background:#EFF5FC;color:#1A5FA0;border-color:#B8D4F0;}
.tag-skills{background:#F5F0FC;color:#6040A0;border-color:#D0C0F0;}
.tag-childcare{background:#FDF5F0;color:#B05020;border-color:#F0CDB8;}
.tag-stuff{background:var(--done-bg);color:var(--done-fg);border-color:var(--border);}
.tag-space{background:#F0F5FF;color:#2040A0;border-color:#C0D0F0;}
.tag-digital{background:#F0F8FF;color:#007A9A;border-color:#B0D8E8;}
.tag-companionship{background:#FDF0F8;color:#902060;border-color:#E0B8D0;}

/* STATUS */
.status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;padding:3px 9px;border-radius:99px;letter-spacing:0.03em;}
.status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0.7;}
.status-open{background:var(--amber-light);color:var(--amber-deep);}
.status-helped{background:var(--offer-bg);color:var(--offer);}
.status-done{background:var(--done-bg);color:var(--done-fg);}
.status-new{background:var(--need-bg);color:var(--need);}
.status-waiting{background:#F5F0FC;color:#6040A0;}

/* LIVE DOT */
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--offer);animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.3;}}

/* CARDS */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.25rem;}
.card-hover{transition:box-shadow 0.15s,border-color 0.15s;cursor:pointer;}
.card-hover:hover{box-shadow:var(--shadow);border-color:var(--border-mid);}
.card-urgent{border-left:3px solid var(--amber);}

/* POST CARD */
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1.1rem 1.25rem;transition:box-shadow 0.15s,border-color 0.15s;cursor:pointer;}
.post-card:hover{box-shadow:var(--shadow-sm);border-color:var(--border-mid);}
.post-title{font-family:'Fraunces',serif;font-size:17px;font-weight:400;color:var(--text);line-height:1.25;margin-bottom:0.3rem;}
.post-body{font-size:13px;color:var(--text-mid);line-height:1.6;font-weight:300;margin-bottom:0.85rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.post-foot{display:flex;justify-content:space-between;align-items:center;gap:0.75rem;}
.post-meta{font-size:11px;color:var(--text-dim);letter-spacing:0.02em;}
.post-meta strong{color:var(--text-mid);font-weight:500;}

/* FORMS */
.field{margin-bottom:1.1rem;}
.lbl{display:block;font-size:11px;font-weight:500;color:var(--text-mid);margin-bottom:5px;letter-spacing:0.07em;text-transform:uppercase;}
.hint{font-size:11px;color:var(--text-dim);margin-top:4px;font-weight:300;}
.inp{width:100%;font-family:'DM Sans',sans-serif;font-size:15px;font-weight:400;color:var(--text);background:var(--surface-warm);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;outline:none;transition:border-color 0.15s,box-shadow 0.15s;}
.inp:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(193,123,42,0.12);}
.inp::placeholder{color:var(--text-dim);}
textarea.inp{resize:vertical;min-height:80px;}
select.inp{cursor:pointer;}

/* FILTER BAR */
.filter-bar{display:flex;gap:0;border-bottom:1px solid var(--border);background:var(--surface);overflow-x:auto;scrollbar-width:none;padding:0 2rem;}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-btn{font-size:11px;font-family:'DM Sans',sans-serif;font-weight:500;padding:11px 14px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--text-dim);cursor:pointer;white-space:nowrap;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:-1px;transition:color 0.1s;}
.filter-btn:hover{color:var(--text);}
.filter-btn.active{color:var(--amber);border-bottom-color:var(--amber);}

/* TOGGLE */
.toggle{width:38px;height:21px;background:var(--border-mid);border-radius:99px;border:none;cursor:pointer;position:relative;transition:background 0.2s;flex-shrink:0;}
.toggle.on{background:var(--amber);}
.toggle::after{content:'';position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:white;transition:left 0.2s;}
.toggle.on::after{left:20px;}

/* DIVIDER */
.divider{display:flex;align-items:center;gap:10px;margin:1.25rem 0;}
.divider-line{flex:1;height:1px;background:var(--border);}
.divider-text{font-size:11px;color:var(--text-dim);white-space:nowrap;letter-spacing:0.05em;}

/* DRAWER */
.drawer-overlay{display:none;position:fixed;inset:0;background:rgba(30,27,23,0.5);z-index:200;}
.drawer-overlay.open{display:block;}
.drawer{position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--border);border-radius:12px 12px 0 0;padding:1.75rem 2rem 2.5rem;max-width:640px;margin:0 auto;z-index:201;transform:translateY(100%);transition:transform 0.25s ease;max-height:92vh;overflow-y:auto;}
.drawer.open{transform:translateY(0);}
.drawer-handle{width:36px;height:3px;background:var(--border-mid);border-radius:99px;margin:0 auto 1.5rem;}

/* PAGE SHELL */
.page-wrap{max-width:800px;margin:0 auto;padding:2.5rem 2rem 5rem;}
.page-wrap-wide{max-width:1040px;margin:0 auto;padding:2rem 2rem 5rem;}

/* FOOTER */
.ds-footer{border-top:1px solid var(--border);padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center;background:var(--surface);gap:1rem;flex-wrap:wrap;}
.footer-note{font-size:11px;color:var(--text-dim);font-weight:300;line-height:1.6;}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}
.footer-link{font-size:11px;color:var(--text-dim);text-decoration:none;letter-spacing:0.03em;transition:color 0.12s;}
.footer-link:hover{color:var(--amber);}

/* UTILS */
.row{display:flex;align-items:center;}
.row-between{display:flex;align-items:center;justify-content:space-between;}
.col{display:flex;flex-direction:column;}
.tags-row{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.gap-1{gap:0.35rem;} .gap-2{gap:0.75rem;} .gap-3{gap:1.25rem;}
.mt-1{margin-top:0.5rem;} .mt-2{margin-top:1rem;} .mt-3{margin-top:1.5rem;}
.mb-1{margin-bottom:0.5rem;} .mb-2{margin-bottom:1rem;} .mb-3{margin-bottom:1.5rem;}
.text-mid{color:var(--text-mid);} .text-dim{color:var(--text-dim);}
.text-sm{font-size:13px;} .text-xs{font-size:11px;}
.fw-300{font-weight:300;}