/* Polished social layer */
.avatar {
  background-image: url('assets/portraits-grid.jpg') !important;
  background-size: 600% 600% !important;
  background-position: calc(var(--portrait-x, 0) * 20%) calc(var(--portrait-y, 0) * 20%) !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
}
.avatar.custom-portrait {
  background-image: var(--profile-image) !important;
  background-size: cover !important;
  background-position: center !important;
}
.post-format { display:none; margin:8px 0; padding:12px; border-left:3px solid var(--gold); background:#fbf7ea; border-radius:4px; font:600 13px/1.45 "DM Sans"; }
.post { scroll-margin-top:80px; }
.post-format:not(:empty) { display:block; }
.source { display:inline-block; text-decoration:none; }
.source:hover { text-decoration:underline; }
.source-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bookmark { border:0; background:transparent; color:var(--muted); padding:6px 8px; border-radius:6px; font-weight:600; cursor:pointer; }
.bookmark:hover { background:#f0f2ef; }
.bookmark.active { color:var(--green); background:#eef5f1; }
.actions button { font-size:12px; border-radius:6px; }
.actions button:hover { background:#f0f2ef; color:var(--ink); }
.reaction-wrap { position:relative; text-align:center; }
.reaction-picker { display:none; position:absolute; left:3px; bottom:36px; background:white; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:99px; padding:4px; z-index:5; white-space:nowrap; }
.reaction-picker button { font-size:21px; padding:4px; transition:transform .15s; }
.reaction-picker button:hover { transform:scale(1.3); }
.reaction-wrap:hover .reaction-picker,.reaction-wrap:focus-within .reaction-picker { display:block; }
.today { background:linear-gradient(145deg,#fffdfa,#edf3e9); }
.today h3 { margin:4px 0 !important; }
.today p { font-size:12px; color:var(--muted); line-height:1.4; }
.today button { border:0; background:var(--green); color:white; border-radius:99px; padding:7px 11px; font-weight:700; cursor:pointer; }
.today-actions { display:flex; flex-wrap:wrap; gap:6px; }
.today button.outline { background:transparent; color:var(--green); border:1px solid var(--green); }
#candleResult:empty { display:none; }
#candleResult { padding-top:8px; border-top:1px solid var(--line); }
dialog { max-width:620px; }
.dialog-close { z-index:2; }
.profile-cover { height:130px; }
.profile-main .avatar { width:100px; height:100px; margin-top:-52px; }
.profile-stats { display:flex; gap:22px; padding:14px 0; border-block:1px solid var(--line); margin-top:14px; }
.profile-stats b { display:block; color:var(--green); }
.profile-posts { margin-top:16px; }
.profile-posts h3 { font-family:"Frank Ruhl Libre"; }
.profile-post-preview { padding:10px 0; border-top:1px solid var(--line); font-size:13px; }
.format-label { display:inline-block; font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:var(--gold); font-weight:700; margin-bottom:4px; }
#mobileDate { display:none; font-size:11px; color:var(--green); font-weight:700; margin-top:9px; }
.directory-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.person-card { padding:14px; text-align:center; cursor:pointer; }
.person-card .avatar { width:72px; height:72px; margin:auto; }
.person-card h3 { font:700 15px "DM Sans"; margin:9px 0 3px; }
.person-card p { color:var(--muted); font-size:11px; margin:0; line-height:1.35; }
.empty-state { padding:40px; text-align:center; }
.empty-state h2 { font-family:"Frank Ruhl Libre"; }
.mobile-nav { display:none; }
@media(max-width:760px) {
  .reaction-picker { left:-2px; }
  #mobileDate { display:block; }
  .directory-grid { grid-template-columns:1fr 1fr; }
  .topbar { width:100%; overflow:hidden; }
  .topbar .search,.topbar .search input { min-width:0; }
  body { padding-bottom:62px; }
  .topbar nav button:not(:first-child) { display:none; }
  .mobile-nav { display:flex; position:fixed; left:0; right:0; bottom:0; height:58px; background:#fffdfa; border-top:1px solid var(--line); justify-content:space-around; z-index:30; }
  .mobile-nav button { display:block; flex:1; border:0; background:none; color:var(--muted); font-size:20px; }
  .mobile-nav button.active { color:var(--green); border-top:2px solid var(--green); }
  .mobile-nav small { display:block; font-size:10px; }
  .chips { scrollbar-width:none; }
  .chips::-webkit-scrollbar { display:none; }
  .post,.post-body,.source { max-width:100%; overflow-wrap:anywhere; }
  .actions button span { display:inline !important; }
  .actions button { font-size:11px; padding:10px 1px; }
  .bookmark span { display:inline; }
}

/* Professional-network visual system */
:root {
  --ink:#1f2328;
  --muted:#666b70;
  --paper:#f4f2ee;
  --card:#fff;
  --green:#0a66c2;
  --green2:#0a66c2;
  --gold:#8a5d16;
  --line:#d9d9d9;
  --shadow:0 1px 2px #00000012;
}
body { font-family:"Inter",Arial,sans-serif; }
.topbar {
  height:56px;
  padding:0 max(24px,calc((100vw - 1128px)/2));
  gap:12px;
  background:#fff;
  border-bottom:0;
  box-shadow:0 1px 0 #00000014;
  backdrop-filter:none;
}
.brand { gap:7px; color:var(--green); font-size:19px; letter-spacing:-.5px; white-space:nowrap; flex:0 0 auto; }
.brand .brand-mark { width:34px; height:34px; border-radius:4px; background:var(--green); font-size:25px; }
.brand b>span { display:inline; width:auto; height:auto; background:transparent; border-radius:0; font:inherit; }
.brand b>span { color:#6f7378; }
.search { width:300px; background:#edf3f8; border-radius:4px; }
.topbar nav button { min-width:76px; font-size:19px; }
.topbar nav .active { color:var(--ink); border-bottom:2px solid var(--ink); }
.layout { max-width:1128px; margin:24px auto; grid-template-columns:225px minmax(0,555px) 300px; gap:24px; }
.card { border-radius:8px; box-shadow:var(--shadow); }
.left-card,.right-column { top:80px; }
.cover,.profile-cover { background:linear-gradient(135deg,#bfd7ea,#7aa7c7 56%,#385c78); }
.viewer-avatar { background:#56687a; }
.welcome { background:#fff; padding:20px 24px; }
.welcome h1 { font-family:"Inter",Arial,sans-serif; font-size:24px; letter-spacing:-.5px; }
.big-aleph { color:#0a66c21d; }
.eyebrow,.format-label { color:#6f7378; }
.chips button { border-color:#666; background:#fff; color:#404448; font-weight:600; }
.chips button.active { background:#e7f3ff; color:#0a66c2; border-color:#0a66c2; }
.post { padding:16px; }
.name { font-family:"Inter",Arial,sans-serif; }
.post-body { line-height:1.45; }
.source { background:#eef3f8; color:#0a66c2; }
.post-format { border-left-color:#0a66c2; background:#f3f7fa; font-family:"Inter",Arial,sans-serif; }
.bookmark:hover,.actions button:hover { background:#ebebeb; }
.bookmark.active { color:#0a66c2; background:#e7f3ff; }
.bubble { background:#f2f2f2; }
.right-column h3,.profile-posts h3 { font-family:"Inter",Arial,sans-serif; }
.today { background:#fff; }
.today button,.comment-form button,.profile-main button { border-radius:99px; }
.mobile-nav { background:#fff; }

@media(max-width:760px) {
  html { scroll-padding-top:calc(64px + env(safe-area-inset-top)); }
  .topbar {
    height:calc(56px + env(safe-area-inset-top));
    padding:env(safe-area-inset-top) 10px 0;
    gap:8px;
  }
  .feed-column,.post { scroll-margin-top:calc(64px + env(safe-area-inset-top)); }
  .brand b { display:block; max-width:124px; overflow:hidden; text-overflow:ellipsis; }
  .brand .brand-mark { width:30px; height:30px; font-size:22px; }
  .search { width:auto; padding:0 9px; }
  .search input { font-size:13px; }
  .topbar nav { display:none; }
  .layout { margin-top:8px; }
  .welcome { padding:16px; }
  .post { border-radius:8px; }
  .mobile-nav button.active { color:#0a66c2; border-top-color:#0a66c2; }
}

@media(max-width:430px) {
  .brand { font-size:15px; gap:5px; }
  .brand b { max-width:none; overflow:visible; }
  .search input::placeholder { color:transparent; }
}

/* Chanukah post media */
/* Chanukah post media */
.post-media{margin:14px 0 6px;border-radius:14px;overflow:hidden;border:1px solid rgba(36,72,54,.16);background:#f4f7f4}
.post-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.post-media figcaption{font-size:12.5px;line-height:1.45;color:#4d5c53;padding:9px 12px}