/* ============================================================
   MELANATED COMMUNITY: visual identity. Site-specific.

   WHO THIS IS FOR
   Black adults across the diaspora, mostly on their phones, who
   want somewhere to talk money, hair, family, faith and culture
   without defending their right to be there. Many have been
   harassed on the big platforms for their race, so the first
   things they look for are the rules, who enforces them, and
   how to keep their personal details safe.

   WHAT THE DESIGN HAS TO SAY
   The porch light's on: warm, grown and welcoming, with the
   house rules posted where you can see them. Protective without
   feeling like a police station.

   SIGNATURES
   A porch light glowing next to the name on every page, a lit
   lantern on the home page, the house rules as signs nailed up
   by the door, moderation drawn as porch steps, and a dusk panel
   for "right now" help.

   COLOR
   Evening lavender paper, dusk indigo for the header and footer,
   porch-light amber for glow and dark-panel buttons, deep violet
   for links and buttons, green for help, brick red for zero
   tolerance and danger, always labeled in words too.
   Every text pair is checked by the build script.

   TYPE
   Bree Serif for headings: sturdy and friendly, like lettering
   on a hand-painted sign. Lato for reading: open and clear on a
   small screen.
   ============================================================ */

:root {
  --paper:   #f8f5fc;
  --lamp-t:  #fff1cf;
  --sage-t:  #e3f1ea;
  --rose-t:  #fbe5e8;
  --ink:     #1b1630;
  --soft:    #544c6b;
  --violet:  #4a2f9a;
  --green:   #1d5c45;
  --red:     #a3242f;
  --dusk:    #221b3f;
  --f-text:  #ece6f7;
  --lamp:    #f5b638;
  --line:    #ddd5ea;

  --accent:     var(--violet);
  --accent-ink: #ffffff;
  --focus:      var(--violet);
  --measure:    66ch;

  --display: 'Bree Serif', Rockwell, Georgia, serif;
  --body:    'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

[hidden] { display: none !important; }
body { font-family: var(--body); font-size: 1.0625rem; line-height: 1.7; color: var(--ink); background: var(--paper); }
.wrap { width: min(68rem, 100% - 2.5rem); margin-inline: auto; }
.narrow { max-width: 46rem; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 6vw, 3.7rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.15rem); margin-bottom: 0.6rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.35rem; }
p + p { margin-top: 0.8rem; }
a { color: var(--violet); text-underline-offset: 3px; text-decoration-thickness: 1.5px; font-weight: 700; }
a:hover { color: var(--ink); text-decoration-thickness: 2.5px; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; border-radius: 4px; }
.kicker, .tagline, .rule-no { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--violet); margin-bottom: 0.5rem; }
.tagline { display: block; font-size: 0.75rem; margin-bottom: 0.2rem; }
.tagline--red { color: var(--red); }
.lede { font-size: 1.2rem; color: var(--soft); max-width: 56ch; }
.fine { font-size: 0.9rem; color: var(--soft); margin-top: 0.9rem; }
.source { font-size: 0.8125rem; color: var(--soft); margin-top: auto; padding-top: 0.6rem; overflow-wrap: anywhere; }
.meta { font-size: 0.875rem; color: var(--soft); margin: 0 0 0.2rem; }
.more { margin-top: 1rem; }

/* Header: dusk, with the porch light by the name */
.site-header { background: var(--dusk); border-bottom: 4px solid var(--lamp); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.5rem; padding-block: 0.9rem 0.7rem; }
.brand { display: inline-flex; align-items: center; gap: 0.7rem; min-height: 44px; font-family: var(--display); font-size: 1.5rem; color: #ffffff; text-decoration: none; }
.brand:hover { color: #ffffff; text-decoration: underline; }
.bulb { width: 14px; height: 14px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 5px rgba(245, 182, 56, 0.25), 0 0 18px 8px rgba(245, 182, 56, 0.35); flex: none; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.1rem 0.3rem; list-style: none; margin: 0; padding: 0; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.55rem; color: var(--f-text); text-decoration: none; font-weight: 700; }
.site-nav a:hover { color: #ffffff; text-decoration: underline; }
.site-nav a[aria-current="page"] { color: #ffffff; box-shadow: inset 0 -3px 0 var(--lamp); }
.site-header :focus-visible, .site-footer :focus-visible, .porch :focus-visible, .panel--dusk :focus-visible { outline-color: var(--lamp); }

main { padding-block: 2.5rem 4rem; }
.hero { padding-bottom: 1rem; }
.hero h1 { max-width: 19ch; margin-bottom: 0.9rem; }
.section { margin-top: 3.25rem; }

/* Home: the porch at dusk. Text and lantern sit in separate columns so the glow never sits behind words. */
.porch { background: var(--dusk); color: #ffffff; border-radius: 22px; padding: clamp(1.4rem, 4vw, 3rem); display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: center; }
.porch h1 { color: #ffffff; max-width: 18ch; margin-bottom: 0.9rem; }
.porch .lede { color: var(--f-text); }
.kicker--lamp { color: var(--lamp); }
.porch-art { order: -1; display: flex; justify-content: center; }
.lantern { width: 8rem; height: auto; }
@media (min-width: 52rem) {
  .porch { grid-template-columns: minmax(0, 1fr) 14rem; }
  .porch-art { order: 0; }
  .lantern { width: 13rem; }
}

/* Stats */
.stats { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr)); }
.stat { max-width: none; background: #ffffff; border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; }
.stat .num { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--violet); margin-bottom: 0.5rem; }

/* Signs nailed up by the door */
.signs { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr)); }
.sign { max-width: none; position: relative; background: #fffdf8; border: 3px solid var(--ink); border-radius: 6px; padding: 1.6rem 1.25rem 1.1rem; display: flex; flex-direction: column; box-shadow: 4px 5px 0 rgba(27, 22, 48, 0.12); }
.sign::before, .sign::after { content: ""; position: absolute; top: 0.6rem; width: 9px; height: 9px; border-radius: 50%; background: var(--soft); }
.sign::before { left: 0.7rem; }
.sign::after { right: 0.7rem; }
.sign--zero { border-top-width: 10px; border-top-color: var(--red); }
.zero { align-self: flex-start; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red); background: var(--rose-t); border-radius: 999px; padding: 0.15rem 0.7rem; margin: 0.1rem 0 0.6rem; }
.sign--link h3 a { color: var(--ink); text-decoration: none; }
.sign--link h3 a::after { content: ""; position: absolute; inset: 0; }
.sign--link h3 a:hover { text-decoration: underline; }
.sign--link:focus-within { outline: 3px solid var(--violet); outline-offset: 3px; }
.sign--link h3 a:focus-visible { outline: none; }
.rule-no { margin-bottom: 0.25rem; font-size: 0.78rem; }

/* Moderation as porch steps */
.steps { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: 0.6rem; counter-reset: step; }
.steps li { max-width: 40rem; background: #ffffff; border: 1px solid var(--line); border-top: 6px solid var(--violet); border-radius: 6px; padding: 0.9rem 1.2rem; counter-increment: step; }
.steps li h3::before { content: counter(step) ". "; color: var(--violet); }
@media (min-width: 48rem) {
  .steps:not(.steps--flat) li:nth-child(2) { margin-left: 2.5rem; }
  .steps:not(.steps--flat) li:nth-child(3) { margin-left: 5rem; }
  .steps:not(.steps--flat) li:nth-child(4) { margin-left: 7.5rem; }
  .steps:not(.steps--flat) li:nth-child(5) { margin-left: 10rem; border-top-color: var(--red); }
}

/* Cards */
.cards { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr)); }
.card { max-width: none; background: #ffffff; border: 1px solid var(--line); border-top: 5px solid var(--violet); border-radius: 8px; padding: 1.1rem 1.25rem 1rem; display: flex; flex-direction: column; }
.card.resource { border-top-color: var(--green); }
.reach { font-size: 0.95rem; margin-top: 0.6rem; background: var(--sage-t); border-radius: 6px; padding: 0.5rem 0.7rem; overflow-wrap: anywhere; }
.go { margin-top: auto; padding-top: 0.6rem; }
.go a { display: inline-flex; align-items: center; min-height: 44px; }

/* Panels */
.panel { background: #ffffff; border: 1px solid var(--line); border-radius: 12px; padding: clamp(1.2rem, 3vw, 1.9rem); max-width: 52rem; }
.panel ul { padding-left: 1.2rem; }
.panel li { margin-bottom: 0.5rem; }
.panel--lamp { background: var(--lamp-t); border-color: #ecd08e; }
.panel--sage { background: var(--sage-t); border-color: #b9d8c8; }
.panel--rose { background: var(--rose-t); border-color: #efbcc3; }
.panel--dusk { background: var(--dusk); border-color: var(--dusk); color: #ffffff; }
.panel--dusk h2 { color: #ffffff; }
.panel--dusk p { color: var(--f-text); }
.draft { margin-top: 0.5rem; }
.plain { padding-left: 1.25rem; margin-top: 0.6rem; }
.plain li { margin-bottom: 0.5rem; }
.numbered { padding-left: 1.4rem; margin-top: 0.8rem; }
.numbered li { margin-bottom: 0.6rem; padding-left: 0.2rem; }

/* Forms and the checklist */
.form-panel { max-width: 40rem; }
.stack { display: grid; gap: 1.1rem; margin-top: 1.2rem; }
.field { display: grid; gap: 0.35rem; border: 0; margin: 0; padding: 0; min-width: 0; }
.field label, .field legend { font-weight: 700; }
.opt { font-weight: 400; color: var(--soft); }
.field input[type="text"], .field input[type="email"], .field select { min-height: 48px; padding: 0.4rem 0.8rem; border: 2px solid var(--soft); border-radius: 8px; background: #ffffff; font: inherit; color: var(--ink); width: 100%; max-width: 100%; }
.checks { list-style: none; padding: 0 !important; margin: 0; display: grid; gap: 0.1rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.checks--two { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
.checks--list { grid-template-columns: 1fr; margin-top: 0.8rem; }
.checks li { margin: 0 !important; }
.checks label { display: flex; gap: 0.65rem; align-items: center; font-weight: 400; min-height: 44px; }
.checks--list label { align-items: flex-start; padding-block: 0.35rem; }
.checks--list input { margin-top: 0.3rem !important; }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400 !important; min-height: 44px; padding-top: 0.3rem; }
.checks input, .consent input { width: 1.2rem; height: 1.2rem; margin: 0; flex: none; accent-color: var(--violet); }
.consent input { margin-top: 0.3rem; }
.stack .btn { justify-self: start; }
.tally { font-weight: 700; font-size: 1.1rem; margin-top: 0.8rem; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 1.4rem; background: var(--violet); color: #ffffff; border: 2px solid var(--violet); border-radius: 999px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; text-align: center; }
.btn:hover { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.btn--lamp { background: var(--lamp); border-color: var(--lamp); color: var(--ink); }
.btn--lamp:hover { background: #ffffff; border-color: #ffffff; color: var(--ink); }
.btn--ghost { background: transparent; border-color: var(--f-text); color: #ffffff; }
.btn--ghost:hover { background: #ffffff; border-color: #ffffff; color: var(--ink); }
.btn--green { background: var(--green); border-color: var(--green); }
.btn--red { background: var(--red); border-color: var(--red); }
.actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.6rem; }
.prose h2 { margin-top: 2.25rem; }
.prose ul { padding-left: 1.25rem; margin-top: 0.5rem; }
.prose li { margin-bottom: 0.45rem; }

/* Footer */
.site-footer { background: var(--dusk); color: #ffffff; margin-top: 3rem; padding-block: 2.5rem 3rem; border-top: 8px solid var(--lamp); }
.site-footer .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.site-footer h2 { font-family: var(--body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--lamp); margin-bottom: 0.5rem; }
.site-footer p { color: var(--f-text); }
.site-footer .danger { color: #ffffff; font-weight: 700; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer a { color: #ffffff; display: inline-block; padding-block: 0.3rem; }
.site-footer a:hover { color: var(--lamp); }
.site-footer .fine { color: var(--f-text); margin-top: 2rem; }

@media (forced-colors: active) {
  .bulb, .sign::before, .sign::after { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
  .site-nav a[aria-current="page"] { text-decoration: underline; }
  .zero { border: 1px solid CanvasText; }
}