/* =========================================================
   CITY DONATION GUIDES — /donate/<city>

   Static pages, one per metro. Deliberately NOT part of the SPA:
   the content has to be in the HTML for a crawler with no JS, and
   fourteen cities inside index.html would be absurd.

   Reuses the paper skin wholesale. No new colours.

   The two fields that earn the page are "will they collect it"
   and "what will they refuse" — every listicle omits both, and
   they are the only two things a person with a sofa needs.
   ========================================================= */

.g-wrap{max-width:820px;margin:0 auto;padding:0 28px}

/* ---- header ---- */
.g-hero{padding:46px 0 10px}
.g-hero h1{
  font-size:clamp(2rem,4.6vw,3.1rem);letter-spacing:-.03em;line-height:1.08;
  margin-bottom:18px;max-width:20ch;
}
.g-hero .lede{font-size:1.1rem;color:var(--ink-2);line-height:1.62;max-width:62ch}

/* the honesty strip — non-negotiable, appears on every generated page */
.g-meta{
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 18px;margin:26px 0 10px;font-size:.87rem;color:var(--ink-2);line-height:1.55;
}
.g-meta .ic{width:16px;height:16px;color:var(--clay);flex:none;margin-top:2px}
.g-meta b{color:var(--ink)}

/* ---- the answer-first box ---- */
.g-quick{
  background:var(--calm-soft);border:1px solid var(--calm-line);border-radius:var(--r-lg);
  padding:24px 26px;margin:32px 0;
}
.g-quick h2{font-size:1.28rem;letter-spacing:-.022em;margin-bottom:10px;color:#2E4E39}
.g-quick p{font-size:.95rem;color:#33553D;line-height:1.6;margin:0 0 12px}
.g-quick ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.g-quick li{font-size:.94rem;color:#33553D;display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.g-quick li .ic{width:15px;height:15px;flex:none;margin-top:3px;color:var(--calm)}
.g-quick a{color:#2E4E39;font-weight:650}
.g-quick.none{background:var(--amber-soft);border-color:var(--amber-line)}
.g-quick.none h2,.g-quick.none p,.g-quick.none li{color:#734D08}

/* ---- section heads ---- */
.g-sec{margin:52px 0 20px}
.g-sec h2{font-size:1.7rem;letter-spacing:-.028em;margin-bottom:8px}
.g-sec p{color:var(--ink-2);font-size:.97rem;margin:0;line-height:1.6}

/* ---- an organization ---- */
.g-org{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:24px 26px;margin-bottom:16px;box-shadow:var(--sh-1);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.g-org:hover{border-color:var(--line-2);box-shadow:var(--sh-2)}
.g-org-top{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:14px}
.g-org h3{font-size:1.24rem;letter-spacing:-.022em;line-height:1.25;flex:1;min-width:200px;margin:0}
.g-org h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line-2)}
.g-org h3 a:hover{color:var(--urgent);border-bottom-color:var(--urgent)}

/* pickup is the headline fact, so it gets the badge */
.g-pick{
  display:inline-flex;align-items:center;gap:7px;flex:none;
  font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;white-space:nowrap;
}
.g-pick .ic{width:13px;height:13px}
.g-pick.free{background:var(--calm-soft);color:#33553D;border:1px solid var(--calm-line)}
.g-pick.paid,.g-pick.conditional{background:var(--amber-soft);color:#734D08;border:1px solid var(--amber-line)}
.g-pick.none{background:var(--paper-3);color:var(--ink-2);border:1px solid var(--line-2)}
.g-pick.unknown{background:var(--paper-2);color:var(--clay);border:1px solid var(--line)}

.g-note{font-size:.9rem;color:var(--ink-2);line-height:1.6;margin:0 0 14px}

.g-rows{display:grid;gap:10px;margin-bottom:4px}
.g-row{display:flex;gap:12px;align-items:flex-start;font-size:.91rem;line-height:1.55}
.g-row .k{
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;font-weight:800;
  color:var(--clay);flex:none;width:82px;padding-top:3px;
}
.g-row .v{color:var(--ink-2);flex:1;min-width:0}
.g-row .v.no{color:var(--ink-2)}
.g-row .v b{color:var(--ink);font-weight:650}

.g-org-foot{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);
}
.g-org-foot a.btn{text-decoration:none}
.g-tel{font-size:.9rem;font-weight:650;color:var(--ink);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px}
.g-tel:hover{color:var(--urgent)}
.g-tel .ic{width:15px;height:15px;color:var(--clay)}
.g-receipt{font-size:.8rem;color:var(--clay)}

/* ---- checklist ---- */
.g-check{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 28px;margin:30px 0;
}
.g-check h2{font-size:1.3rem;letter-spacing:-.022em;margin-bottom:14px}
.g-check ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.g-check li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;
  color:var(--ink-2);line-height:1.6}
.g-check li .ic{width:15px;height:15px;flex:none;margin-top:4px;color:var(--calm)}
.g-check li b{color:var(--ink);font-weight:650}

/* ---- FAQ (marked up as FAQPage) ---- */
.g-faq{border-bottom:1px solid var(--line);padding:2px 0}
.g-faq summary{
  list-style:none;cursor:pointer;padding:17px 34px 17px 0;position:relative;
  font-family:var(--display);font-size:1.08rem;letter-spacing:-.02em;line-height:1.35;
  font-variation-settings:"SOFT" 20,"WONK" 1;
}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary:hover{color:var(--urgent)}
.g-faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--clay);border-bottom:2px solid var(--clay);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--ease);
}
.g-faq[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.g-faq .a{padding:0 34px 18px 0;color:var(--ink-2);font-size:.94rem;line-height:1.65}

/* ---- other cities ---- */
.g-cities{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.g-city{
  display:block;padding:14px 16px;border-radius:14px;text-decoration:none;
  background:var(--card);border:1px solid var(--line);color:var(--ink);
  font-size:.94rem;font-weight:600;transition:all .18s var(--ease);
}
.g-city:hover{border-color:var(--urgent);color:var(--urgent);transform:translateY(-2px)}
.g-city small{display:block;font-weight:500;color:var(--clay);font-size:.79rem;margin-top:2px}
.g-city.here{background:var(--ink);color:#fff;border-color:var(--ink);pointer-events:none}
.g-city.here small{color:rgba(255,255,255,.62)}

/* ---- the product hand-off ---- */
.g-cta{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 32px;margin:36px 0;box-shadow:var(--sh-2);
}
.g-cta h2{font-size:1.4rem;letter-spacing:-.025em;margin-bottom:10px}
.g-cta p{color:var(--ink-2);font-size:.97rem;line-height:1.62;margin-bottom:18px}
.g-cta .btn{text-decoration:none;margin-right:8px}

@media(max-width:640px){
  .g-wrap{padding:0 20px}
  .g-hero{padding:32px 0 6px}
  .g-org{padding:20px}
  .g-row{flex-direction:column;gap:3px}
  .g-row .k{width:auto}
  .g-cta,.g-check,.g-quick{padding:22px}
}

/* ---- audit flags ----
   Two things a reader will otherwise get wrong. Value Village is a for-profit
   and EPRA/SARCAN recycle rather than rehome, so a donations page that lists
   them unlabelled invites an assumption of charity and a tax receipt. And
   several organizations take donations only by referral, which wastes both
   the reader's afternoon and the charity's staff time. */
.g-flag{
  display:flex;gap:10px;align-items:flex-start;margin-top:12px;
  border-radius:12px;padding:11px 13px;font-size:.86rem;line-height:1.55;
}
.g-flag .ic{width:15px;height:15px;flex:none;margin-top:3px}
.g-flag b{font-weight:700}
.g-flag.not-charity{background:var(--amber-soft);border:1px solid var(--amber-line);color:#734D08}
.g-flag.restricted{background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink-2)}

/* =========================================================
   /sell/<city> — the for-profit side.

   Visually a sibling of the donation guides, not a different
   site, but the two callouts at the top are deliberately louder
   than anything on the donate pages. On a donation guide the
   worst outcome is a wasted trip; here it is someone handing
   over a wedding ring against a loan whose terms they never saw.
   ========================================================= */

.s-pawn{
  border:1px solid var(--amber-line);background:var(--amber-soft);
  border-radius:20px;padding:22px 26px;margin:0 0 24px;
}
.s-pawn h2{
  font-family:var(--display);font-size:1.22rem;letter-spacing:-.024em;
  margin:0 0 10px;color:#734D08;display:flex;align-items:center;gap:9px;
}
.s-pawn h2 .ic{width:19px;height:19px;flex:none}
.s-pawn p{font-size:.94rem;line-height:1.65;color:#5C3E06;margin:0 0 11px}
.s-pawn p:last-child{margin-bottom:0}
.s-pawn b{font-weight:700}

.s-payout{
  border:1px solid var(--line-2);background:var(--paper-2);
  border-radius:20px;padding:22px 26px;margin:0 0 30px;
}
.s-payout h2{font-family:var(--display);font-size:1.22rem;letter-spacing:-.024em;margin:0 0 10px}
.s-payout p{font-size:.93rem;line-height:1.68;color:var(--ink-2);margin:0 0 11px}
.s-payout p:last-child{margin-bottom:0}

/* what kind of transaction this is — the badge that stops the surprise */
.s-deal{
  font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);
}
.s-deal.sell{background:var(--calm-soft);color:#33553D;border-color:var(--calm-line)}
.s-deal.pawn{background:var(--amber-soft);color:#734D08;border-color:var(--amber-line)}
.s-deal.consign,.s-deal.credit{background:var(--urgent-soft);color:#8A3A12;border-color:var(--urgent-line)}

/* --clay on --paper-2 is 3.48:1, which is fine for a caption and not fine for
   this: "Bring it to them" versus "May collect" is the line that decides
   whether someone needs to borrow a van. --ink-2 takes it to 8.1:1. */
.s-col{
  font-size:.66rem;font-weight:700;letter-spacing:.04em;
  padding:4px 9px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--line);background:var(--paper-2);color:var(--ink-2);
}
.s-col.cond{background:var(--calm-soft);color:#33553D;border-color:var(--calm-line)}

.s-reg{
  display:flex;gap:11px;align-items:flex-start;
  border:1px solid var(--line);background:var(--paper-2);border-radius:14px;
  padding:15px 18px;margin:8px 0 30px;
  font-size:.86rem;line-height:1.6;color:var(--ink-2);
}
.s-reg .ic{width:16px;height:16px;flex:none;margin-top:2px;color:var(--clay)}

@media(max-width:640px){
  .s-pawn,.s-payout{padding:19px 18px;border-radius:16px}
}

/* the outlets widget, when it sits on a guide page */
.ot-deal{
  font-size:.66rem;font-weight:700;letter-spacing:.04em;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
  background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink-2);
}
.ot-flag.warn{background:var(--amber-soft);color:#734D08;border:1px solid var(--amber-line)}
.ot-mores{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px}