/* Evanston Chamber demo — shared styles (all pages). */
    :root {
      --bg: #faf7f2;
      --bg-deep: #f1ece3;
      --surface: #ffffff;
      --line: rgba(46, 58, 50, 0.16);
      --text: #1f2a24;
      --muted: #5c6b60;
      --accent: #1e6b4f;
      --accent-2: #b4552d;
      --ink: #f6f1e7;
      --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;
      --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    }
    * { box-sizing: border-box; margin: 0; }
    html { scroll-behavior: smooth; }
    body { background: var(--bg); color: var(--text);
           font-family: var(--font-body); line-height: 1.6; }
    .wrap { max-width: 64rem; margin: 0 auto; padding: 0 1.25rem; }
    section { padding: 3.5rem 0; }
    h1, h2, h3 { font-family: var(--font-display); line-height: 1.12;
                 letter-spacing: -0.01em; }
    h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 0.4rem; }
    .muted { color: var(--muted); }
    .eyebrow { color: var(--accent); font-weight: 700; font-size: 0.78rem;
               letter-spacing: 0.16em; text-transform: uppercase; }
    .btn { display: inline-block; background: var(--accent); color: var(--ink);
           padding: 0.9rem 1.6rem; border-radius: 0.5rem; font-weight: 700;
           text-decoration: none; border: 0; font-size: 1rem; cursor: pointer;
           font-family: var(--font-body); transition: transform 0.12s ease; }
    .btn:active { transform: scale(0.97); }
    .btn.quiet { background: rgba(30, 107, 79, 0.1); color: var(--accent); }
    .btn.small { padding: 0.45rem 0.9rem; font-size: 0.85rem; }
    .card { background: var(--surface); border: 1px solid var(--line);
            border-radius: 0.75rem; padding: 1.25rem; }
    .demo-tag { display: inline-block; background: rgba(180, 85, 45, 0.12);
                color: var(--accent-2); font-size: 0.68rem; font-weight: 700;
                letter-spacing: 0.1em; text-transform: uppercase;
                border-radius: 99px; padding: 0.1rem 0.55rem; vertical-align: middle; }

    .demo-note { background: var(--text); color: var(--bg); text-align: center;
                 font-size: 0.8rem; padding: 0.45rem 1rem; }
    .demo-note strong { color: #a8d5bf; }

    .persona { background: var(--surface);
               border-bottom: 1px solid var(--line); padding: 0.5rem 0; }
    .persona .wrap { display: flex; align-items: center; gap: 0.6rem; }
    .brand { display: flex; align-items: center; gap: 0.55rem; text-decoration: none;
             color: var(--text); min-width: 0; }
    .brand img { display: block; }
    .brand b { font-family: var(--font-display); font-size: 1.02rem; white-space: nowrap; }
    @media (max-width: 560px) { .brand b span { display: none; } }
    #acct { display: flex; align-items: center; gap: 0.6rem; font-size: 0.88rem;
            margin-left: auto; text-align: right; }
    #acct a { color: var(--accent); text-decoration: none; font-weight: 600; }
    #acct .who { color: var(--muted); }
    @media (max-width: 560px) { #acct .who { display: none; } }

    header.hero { padding: 4rem 0 3.5rem; background:
      linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%); }
    .hero h1 { font-size: clamp(2.4rem, 7vw, 4rem); margin: 0.5rem 0 1rem; }
    .hero p.lead { font-size: 1.15rem; max-width: 34em; margin-bottom: 1.6rem; }
    nav.jump { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
    nav.jump a { color: var(--accent); text-decoration: none; font-weight: 600;
                 font-size: 0.9rem; padding: 0.35rem 0.8rem; border-radius: 99px;
                 border: 1px solid var(--line); background: var(--surface); }
    .hero-img { display: block; width: 100%; height: auto; margin-top: 2.2rem;
                border-radius: 0.75rem; border: 1px solid var(--line); }

    .search { display: flex; gap: 0.5rem; margin: 1.2rem 0 0.8rem; }
    .search input { flex: 1; font-size: 1.05rem; padding: 0.8rem 1rem;
                    border: 1.5px solid var(--line); border-radius: 0.6rem;
                    background: var(--surface); color: var(--text);
                    font-family: var(--font-body); min-width: 0; }
    .search input:focus { outline: 2px solid var(--accent); border-color: transparent; }
    .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
    .chips button { font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.75rem;
                    border-radius: 99px; border: 1px solid var(--line);
                    background: var(--surface); color: var(--muted); cursor: pointer;
                    font-family: var(--font-body); }
    .chips button[aria-pressed="true"] { background: var(--accent); color: var(--ink);
                    border-color: var(--accent); }
    #count { font-weight: 700; color: var(--accent); }

    #members { list-style: none; padding: 0; margin-top: 1rem;
               display: grid; gap: 0.5rem;
               grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
    #members li { background: var(--surface); border: 1px solid var(--line);
                  border-radius: 0.6rem; padding: 0.7rem 0.9rem; font-size: 0.92rem;
                  cursor: pointer; transition: transform 0.12s ease; }
    #members li:hover { transform: translateY(-2px); }
    #members li strong { display: block; color: var(--accent); }
    #members li em { display: block; font-style: normal; color: var(--accent-2);
                     font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
                     text-transform: uppercase; margin: 0.1rem 0; }
    #members li span { color: var(--muted); font-size: 0.85rem; }
    #members li.hide { display: none; }

    .cal-shell { display: grid; gap: 1.2rem; margin-top: 1.2rem;
                 grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
                 align-items: start; }
    @media (max-width: 760px) { .cal-shell { grid-template-columns: 1fr; } }
    .cal-col { display: flex; flex-direction: column; gap: 1.2rem; }
    .cal-promo img { display: block; width: 100%; height: auto;
                     border-radius: 0.75rem; border: 1px solid var(--line);
                     transition: transform 0.15s ease; }
    .cal-promo:hover img { transform: translateY(-2px); }
    .cal-promo.tall img { height: 250px; object-fit: cover;
                          object-position: top; }
    @media (max-width: 760px) { .cal-promo { display: none; } }
    .cal-head { display: flex; justify-content: space-between; align-items: center;
                margin-bottom: 0.6rem; }
    .cal-head b { font-family: var(--font-display); font-size: 1.15rem; }
    .cal-head button { border: 1px solid var(--line); background: var(--surface);
                       border-radius: 0.4rem; cursor: pointer; font-size: 1rem;
                       padding: 0.15rem 0.7rem; color: var(--accent); }
    .cal-head button:disabled { opacity: 0.3; cursor: default; }
    .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; }
    .cal-grid .dow { text-align: center; font-size: 0.65rem; font-weight: 700;
                     letter-spacing: 0.08em; color: var(--muted); padding: 0.2rem 0; }
    .cal-grid .day { aspect-ratio: 1; display: flex; flex-direction: column;
                     align-items: center; justify-content: center; border-radius: 0.4rem;
                     font-size: 0.85rem; color: var(--muted); position: relative; }
    .cal-grid .day.has { background: rgba(30, 107, 79, 0.1); color: var(--text);
                         font-weight: 700; cursor: pointer; }
    .cal-grid .day.has::after { content: ""; width: 5px; height: 5px; border-radius: 50%;
                         background: var(--accent-2); position: absolute; bottom: 15%; }
    .events { display: grid; gap: 0.9rem; }
    .event { display: flex; gap: 1rem; scroll-margin-top: 5rem;
             transition: box-shadow 0.3s ease; }
    .event.flash { box-shadow: 0 0 0 2px var(--accent-2); }
    .event .thumb { flex: 0 0 76px; margin-left: auto; align-self: flex-start; }
    .event .thumb img { display: block; width: 76px; height: 76px;
                        object-fit: cover; border-radius: 0.5rem;
                        border: 1px solid var(--line); }
    @media (max-width: 480px) { .event .thumb { display: none; } }
    .event h3 a { color: inherit; text-decoration: none; }
    .date { flex: 0 0 3.6rem; text-align: center; background: var(--bg-deep);
            border-radius: 0.5rem; padding: 0.5rem 0.2rem; height: fit-content; }
    .date b { display: block; font-size: 1.4rem; line-height: 1.1; }
    .date span { font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
                 color: var(--muted); }
    .event h3 { font-size: 1.05rem; }
    .event .meta { font-size: 0.85rem; color: var(--muted); margin: 0.15rem 0 0.6rem; }
    .acts { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
    .event .done { color: var(--accent); font-weight: 700; font-size: 0.85rem; }

    .jobs { display: grid; gap: 0.6rem; margin-top: 1.2rem; }
    .job { display: flex; justify-content: space-between; gap: 1rem;
           align-items: center; flex-wrap: wrap; }
    .job > div { min-width: 0; flex: 1 1 22rem; }
    .job .meta { font-size: 0.85rem; color: var(--muted); }
    .job .jdesc { font-size: 0.85rem; color: var(--muted); margin-top: 0.25rem;
                  max-width: 46em; }

    .peek { display: grid; gap: 1rem; margin-top: 1.2rem;
            grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
    .peek h3 { margin-bottom: 0.6rem; }
    .peek .eyebrow { margin-top: 1rem; }
    .stat { display: flex; justify-content: space-between; gap: 0.6rem;
            font-size: 0.92rem; padding: 0.45rem 0; border-top: 1px solid var(--line);
            align-items: center; flex-wrap: wrap; }
    .stat b { color: var(--accent); }
    .peek input { width: 100%; font-family: var(--font-body); font-size: 0.9rem;
            padding: 0.5rem 0.7rem; border: 1.5px solid var(--line);
            border-radius: 0.5rem; background: var(--bg); color: var(--text);
            margin-top: 0.4rem; }
    .locked { color: var(--muted); font-size: 0.9rem; border-left: 3px solid var(--line);
              padding-left: 0.8rem; margin-top: 0.8rem; }
    .locked a { color: var(--accent); }

    .tiers { display: grid; gap: 1rem; margin: 1.2rem 0;
             grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
    .tier b.price { font-size: 1.6rem; font-family: var(--font-display); display: block; }
    .tier span { font-size: 0.85rem; color: var(--muted); }

    footer { background: var(--bg-deep); padding: 2.5rem 0; margin-top: 2rem;
             font-size: 0.9rem; color: var(--muted); }
    footer a { color: var(--accent); }

    #toast { position: fixed; left: 50%; bottom: 1.2rem;
             transform: translateX(-50%) translateY(150%);
             background: var(--text); color: var(--bg); padding: 0.7rem 1.1rem;
             border-radius: 0.6rem; font-size: 0.88rem; max-width: min(92vw, 30rem);
             transition: transform 0.25s ease; z-index: 30; }
    #toast.show { transform: translateX(-50%) translateY(0); }

    #overlay { position: fixed; inset: 0; background: rgba(31, 42, 36, 0.5);
               display: flex; align-items: flex-end; justify-content: center;
               opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 20; }
    #overlay.open { opacity: 1; pointer-events: auto; }
    @media (min-width: 640px) { #overlay { align-items: center; } }
    #modal { background: var(--surface); border-radius: 0.9rem 0.9rem 0 0;
             width: min(100%, 34rem); max-height: 88vh; overflow-y: auto;
             padding: 1.4rem 1.4rem 1.8rem; transform: translateY(24px);
             transition: transform 0.2s ease; }
    @media (min-width: 640px) { #modal { border-radius: 0.9rem; } }
    #modal h3 { font-size: 1.3rem; margin: 0.1rem 0 0.2rem; }
    #modal .x { float: right; border: 0; background: none; font-size: 1.4rem;
                cursor: pointer; color: var(--muted); line-height: 1; padding: 0.2rem; }
    .tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.4rem 0 0.8rem; }
    .tags i { font-style: normal; font-size: 0.75rem; font-weight: 600;
              background: rgba(30, 107, 79, 0.1); color: var(--accent);
              border-radius: 99px; padding: 0.15rem 0.6rem; }
    .tags.warm i { background: rgba(180, 85, 45, 0.1); color: var(--accent-2); }
    .rec { display: flex; justify-content: space-between; align-items: center;
           gap: 0.6rem; padding: 0.5rem 0; border-top: 1px solid var(--line); }
    .rec div { min-width: 0; }
    .rec b { display: block; font-size: 0.92rem; }
    .rec span { font-size: 0.78rem; color: var(--muted); }
    .thread { background: var(--bg); border-radius: 0.6rem; padding: 1rem;
              display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.8rem; }
    .msg { max-width: 85%; padding: 0.5rem 0.8rem; border-radius: 0.9rem;
           font-size: 0.88rem; }
    .msg.sys { align-self: center; background: none; color: var(--muted);
               font-size: 0.75rem; text-align: center; }
    .msg.them { align-self: flex-start; background: var(--bg-deep); }
    .msg.me { align-self: flex-end; background: var(--accent); color: var(--ink); }
    .composer { display: flex; gap: 0.5rem; margin-top: 0.6rem; }
    .composer input { flex: 1; min-width: 0; font-family: var(--font-body);
              font-size: 0.9rem; padding: 0.5rem 0.8rem; border-radius: 99px;
              border: 1.5px solid var(--line); background: var(--surface); color: var(--text); }
    /* Modal content is JS-generated — it gets its own spacing contract
       because the global margin reset removes all default rhythm. */
    #modal p { margin: 0.55rem 0 0.9rem; }
    #modal label { display: block; margin: 0.85rem 0 0.2rem; }
    .field { width: 100%; padding: 0.6rem 0.8rem;
              border: 1.5px solid var(--line); border-radius: 0.5rem;
              font-family: var(--font-body); font-size: 0.95rem;
              background: var(--bg); color: var(--text);
              margin: 0 0 0.35rem; resize: vertical; }
    /* Four views: sections outside the active view are hidden by JS.
       Without JS nothing gets the class — the page stays a full scroll. */
    .topbars { position: sticky; top: 0; z-index: 5; }
    .viewbar { background: var(--surface); border-bottom: 1px solid var(--line); }
    .viewbar .wrap { display: flex; gap: 0.4rem;
              padding-top: 0.45rem; padding-bottom: 0.45rem; }
    .viewbar a { flex: 1; text-align: center; text-decoration: none;
              font-weight: 700; font-size: 0.88rem; color: var(--accent);
              padding: 0.4rem 0.2rem; border-radius: 99px;
              border: 1.5px solid var(--line); background: var(--bg); }
    .viewbar a[aria-current="true"] { background: var(--accent);
              color: var(--ink); border-color: var(--accent); }
    .view-hide { display: none; }
    .nl { display: flex; gap: 0.5rem; margin-bottom: 0.6rem; }
    .nl input { flex: 1; min-width: 0; font-family: var(--font-body);
              font-size: 0.95rem; padding: 0.65rem 0.9rem;
              border-radius: 0.6rem; border: 1.5px solid var(--accent);
              background: var(--surface); color: var(--text); }
    #nlout { margin: 0.4rem 0 0.9rem; }
    .feed { display: grid; gap: 0.8rem; max-width: 46em; }
    .post { cursor: pointer; }
    .post .pk { display: flex; justify-content: space-between;
              align-items: baseline; gap: 0.6rem; }
    .post .pk .muted { font-size: 0.78rem; }
    .post h3 { margin: 0.2rem 0 0.35rem; font-size: 1.05rem; }
    .post.hiddenpost { opacity: 0.45; border: 1.5px dashed var(--line); }
    .byline { background: none; border: 0; padding: 0; color: var(--accent);
              font-weight: 700; font-family: inherit; font-size: 0.85rem;
              cursor: pointer; text-decoration: underline; }
    .hostb { font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.5rem;
              border-radius: 99px; background: var(--bg-deep);
              border: 1px solid var(--line); white-space: nowrap; }
    /* run 2: real pages */
    .viewbar a[aria-current="page"] { background: var(--accent); color: var(--ink); border-color: var(--accent); }
    .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.2rem; }
    @media (max-width: 560px) { .tiles { grid-template-columns: 1fr; } }
    .tile { display: block; text-decoration: none; color: var(--text); }
    .tile b { display: block; font-family: var(--font-display, inherit); font-size: 1.15rem; margin-bottom: 0.25rem; }
    .tile span { color: var(--muted); font-size: 0.92rem; }
    .adminbar { background: var(--surface); border-bottom: 1px solid var(--line); }
    .adminbar .wrap { display: flex; align-items: baseline; gap: 0.8rem; padding-top: 0.7rem; padding-bottom: 0.7rem; }
    .adminbar h1 { font-size: 1.15rem; margin: 0; }
    .adminbar .muted { font-size: 0.85rem; }
    .adminbar a { margin-left: auto; color: var(--accent); font-weight: 600; font-size: 0.85rem; text-decoration: none; }
    .statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; }
    .stat-card b { display: block; font-size: 1.6rem; }
    .stat-card span { color: var(--muted); font-size: 0.8rem; }
    .stat-card i { display: block; font-style: normal; color: var(--muted); font-size: 0.72rem; margin-top: 0.2rem; }
    .admin-grid { display: grid; gap: 0.8rem; margin-top: 0.8rem; }
    @media (min-width: 800px) { .admin-grid { grid-template-columns: 3fr 2fr; } }
    .chart-caption { color: var(--muted); font-size: 0.75rem; margin-top: 0.4rem; }
    .toprow { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
    .toprow:first-of-type { border-top: 0; }
    .toprow b { font-weight: 600; }
    .toprow .muted { white-space: nowrap; }
    .gate { max-width: 26rem; margin: 3rem auto; text-align: center; }
    .slimfoot { padding: 1.2rem 0; color: var(--muted); font-size: 0.8rem; }

    .pager { display: flex; gap: 1.25rem; align-items: center; justify-content: center;
             margin: 2rem 0 0.6rem; }
    .pager button { padding: 0.6rem 1.2rem; }
    .pager span { min-width: 7.5em; text-align: center; font-size: 0.92rem; }
    .pager button[disabled] { opacity: 0.4; cursor: default; }