/* The Expat Club — member area (chic ink/bone/brass system) */
:root{
  --ink:#111E38; --bone:#FBF7EF; --brass:#B4915A; --teal:#2E4B47;
  --panel:#F3EEE2; --line:rgba(17,30,56,.14); --muted:rgba(17,30,56,.62);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bone);color:var(--ink);font-family:'Hanken Grotesk',system-ui,sans-serif;line-height:1.55}
a{color:inherit}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px}

/* header */
header.site{border-bottom:1px solid var(--line);background:var(--bone);position:sticky;top:0;z-index:20}
header.site .bar{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;max-width:1060px;margin:0 auto}
.brand{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:1.25rem;text-decoration:none;letter-spacing:.02em}
.brand .c{color:var(--brass)}
nav.mnav{display:flex;gap:18px;align-items:center;font-size:.85rem}
nav.mnav a{text-decoration:none;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
nav.mnav a.on,nav.mnav a:hover{color:var(--ink)}

/* type */
h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:.01em}
.eyebrow{letter-spacing:.22em;text-transform:uppercase;font-size:.7rem;font-weight:700;color:var(--brass)}
.sub{color:var(--muted);max-width:56ch}

/* layout blocks */
.page{padding:44px 0 80px}
.panel{background:var(--panel);border:1px solid var(--line);padding:26px}
.hairline{border:none;border-top:1px solid var(--line);margin:20px 0}

/* forms */
label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;margin:14px 0 6px;color:var(--muted)}
input,select,textarea{width:100%;padding:12px 14px;border:1px solid var(--line);background:#fff;font:inherit;color:var(--ink);border-radius:0}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:-1px}
textarea{min-height:110px;resize:vertical}
.btn{display:inline-block;background:var(--ink);color:var(--bone);border:none;padding:13px 26px;font:inherit;font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--teal)}
.btn.brass{background:var(--brass);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.err{color:#8C3B2E;font-size:.9rem;margin-top:10px;min-height:1.2em}
.ok{color:var(--teal);font-size:.9rem;margin-top:10px}

/* directory */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}
.chip{border:1px solid var(--line);background:#fff;padding:8px 16px;font-size:.8rem;font-weight:600;letter-spacing:.04em;cursor:pointer}
.chip.on{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{background:#fff;border:1px solid var(--line);padding:20px;display:flex;flex-direction:column;gap:8px}
.card h3{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.2rem;font-weight:600}
.card .meta{font-size:.8rem;color:var(--muted)}
.card .bio{font-size:.85rem;color:var(--muted);flex:1}
.stage{display:inline-block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;padding:3px 8px;border:1px solid var(--brass);color:var(--brass)}
.avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.05rem;flex:none}
img.avatar{object-fit:cover;background:var(--panel)}
/* avatar upload */
.avwrap{display:flex;gap:16px;align-items:center;margin-top:6px}
.avwrap .avatar{width:72px;height:72px;font-size:1.6rem}
.avactions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.avactions .lnk{font-size:.8rem;color:var(--brass);font-weight:600;cursor:pointer;background:none;border:none;padding:0;text-decoration:underline;letter-spacing:0;text-transform:none}
.avactions .hint{font-size:.72rem;color:var(--muted)}

/* messages */
.split{display:grid;grid-template-columns:280px 1fr;gap:0;border:1px solid var(--line);background:#fff;min-height:60vh}
.threads{border-right:1px solid var(--line);overflow-y:auto;max-height:70vh}
.thread{display:flex;gap:10px;padding:14px;border-bottom:1px solid var(--line);cursor:pointer;align-items:center}
.thread:hover,.thread.on{background:var(--panel)}
.thread .name{font-weight:700;font-size:.9rem}
.thread .prev{font-size:.78rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.chat{display:flex;flex-direction:column;max-height:70vh}
.chat-head{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700}
.chat-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:70%;padding:10px 14px;font-size:.92rem}
.msg.mine{align-self:flex-end;background:var(--ink);color:var(--bone)}
.msg.theirs{align-self:flex-start;background:var(--panel);border:1px solid var(--line)}
.msg time{display:block;font-size:.65rem;opacity:.6;margin-top:4px}
.chat-input{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line)}
.chat-input input{flex:1}
.empty{padding:40px;color:var(--muted);text-align:center}
.banner{background:#FBF3E4;border:1px solid var(--brass);padding:14px 18px;margin:18px 0;font-size:.92rem}
.banner a{color:var(--brass);font-weight:600}
.toast{background:var(--teal);color:var(--bone);padding:12px 18px;margin:18px 0;font-size:.92rem}

footer.site{border-top:1px solid var(--line);padding:26px 24px;text-align:center;font-size:.8rem;color:var(--muted)}
/* ---------- mobile polish ---------- */
@media(max-width:680px){
  header.site .bar{flex-wrap:wrap;gap:6px 14px;padding:11px 18px}
  .brand{font-size:1.12rem}
  nav.mnav{width:100%;gap:11px 16px;font-size:.7rem;flex-wrap:wrap;letter-spacing:.03em}
  .wrap{padding:0 18px}
  .page{padding:24px 0 60px}
  h1{font-size:1.85rem}
  .sub{font-size:.95rem}
  .panel{padding:20px}
  .grid{grid-template-columns:1fr;gap:12px}
  .filters{gap:8px;margin:18px 0}
  .filters #q{max-width:none;margin-left:0;width:100%;order:5}
  .chip{flex:1;text-align:center;min-width:calc(50% - 4px)}
  .split{grid-template-columns:1fr;min-height:auto}
  .threads{max-height:36vh;border-right:none;border-bottom:1px solid var(--line)}
  .chat{max-height:none}
  .chat-body{min-height:44vh}
  .msg{max-width:86%}
  .thread .prev{max-width:62vw}
  .chat-input{position:sticky;bottom:0;background:#fff}
  .avwrap{gap:12px}
}