:root {
    --vox-ink: #1A1A1A;
    --vox-black: #000000;
    --vox-burgundy: #4A2535;
    --vox-burgundy-hover: #6E3A4F;
    --vox-amber: #D4860B;
    --vox-amber-hover: #E8A23A;
    --vox-cobalt: #1A3D7C;
    --vox-cobalt-hover: #3A5FA8;
    --vox-paper: #FFFFFF;
    --vox-soft: #F6F4F1;
    --vox-line: #E6E2DC;
    --vox-muted: #686868;
}

.vox-hub,
.vox-profile {
    background: var(--vox-paper);
    color: var(--vox-ink);
    font-family: "Cairo", "Noto Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.vox-hub *,
.vox-profile * { box-sizing: border-box; }

.vox-hub-hero {
    background: var(--vox-black);
    color: #fff;
    isolation: isolate;
    min-height: 470px;
    overflow: hidden;
    position: relative;
}

.vox-hub-hero::before,
.vox-hub-hero::after {
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    content: "";
    height: 420px;
    position: absolute;
    width: 420px;
    z-index: -1;
}

.vox-hub-hero::before { right: -170px; top: -210px; }
.vox-hub-hero::after { bottom: -280px; left: -90px; }

.vox-hub-hero-glow {
    background:
        radial-gradient(circle at 20% 55%, rgba(26,61,124,.4), transparent 32%),
        radial-gradient(circle at 80% 10%, rgba(74,37,53,.58), transparent 28%),
        radial-gradient(circle at 60% 100%, rgba(212,134,11,.22), transparent 29%);
    inset: 0;
    position: absolute;
    z-index: -1;
}

.vox-hub-hero-inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0 auto;
    min-height: 470px;
    padding: 74px 5vw;
    text-align: center;
}

.vox-kicker,
.vox-section-kicker,
.vox-join-kicker {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0;
    margin: 0 0 12px;
}

.vox-hub-hero .vox-kicker { color: rgba(255,255,255,.68); }
.vox-hub-hero h1 {
    color: #fff;
    font-size: clamp(4.6rem, 8vw, 9.2rem);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.12;
    margin: 0;
}

.vox-hero-copy {
    color: rgba(255,255,255,.84);
    font-size: clamp(1.6rem, 2.2vw, 2.1rem);
    line-height: 1.9;
    margin: 24px auto 0;
    max-width: 790px;
}

.vox-accent-line { display: flex; gap: 8px; margin-top: 34px; }
.vox-accent-line i { display: block; height: 4px; width: 48px; }
.vox-accent-line i:nth-child(1) { background: var(--vox-burgundy); }
.vox-accent-line i:nth-child(2) { background: var(--vox-amber); }
.vox-accent-line i:nth-child(3) { background: var(--vox-cobalt); }

.vox-wall { padding: 72px 4vmin 100px; }
.vox-wall > .inner,
.vox-articles > .inner,
.vox-profile-inner { max-width: 1200px; }

.vox-section-head {
    align-items: end;
    border-bottom: 1px solid var(--vox-line);
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 34px;
    padding-bottom: 20px;
}

.vox-section-head > div { border-right: 6px solid var(--vox-burgundy); padding-right: 16px; }
.vox-section-kicker { color: var(--vox-muted); }
.vox-section-head h2 { color: var(--vox-ink); font-size: clamp(2.6rem, 4vw, 4.2rem); margin: 0; }
.vox-section-head > p { color: var(--vox-muted); font-size: 1.35rem; margin: 0; }

.vox-wall-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vox-author-card {
    background: #fff;
    border: 1px solid var(--vox-line);
    border-top: 4px solid var(--vox-burgundy);
    min-height: 430px;
    overflow: hidden;
    position: relative;
    transition: box-shadow .2s ease, transform .2s ease;
}

.vox-author-card:nth-of-type(3n+2) { border-top-color: var(--vox-amber); }
.vox-author-card:nth-of-type(3n) { border-top-color: var(--vox-cobalt); }
.vox-author-card:hover { box-shadow: 0 16px 42px rgba(0,0,0,.14); transform: translateY(-5px); }
.vox-author-card-link { color: var(--vox-ink) !important; display: flex; flex-direction: column; height: 100%; padding: 38px 30px 30px; text-align: center; text-decoration: none !important; }

.vox-portrait-wrap {
    align-self: center;
    background: #fff;
    border: 4px solid var(--vox-burgundy);
    border-radius: 50%;
    height: 188px;
    padding: 6px;
    width: 188px;
}

.vox-author-card:nth-of-type(3n+2) .vox-portrait-wrap { border-color: var(--vox-amber); }
.vox-author-card:nth-of-type(3n) .vox-portrait-wrap { border-color: var(--vox-cobalt); }
.vox-portrait,
.vox-monogram { border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
.vox-monogram {
    background: linear-gradient(135deg, #171717, #353535);
    color: #fff;
    display: block;
    font-size: 0;
    line-height: 168px;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
}
.vox-monogram::first-letter { font-size: 6rem; font-weight: 800; }

.vox-author-copy { display: flex; flex: 1; flex-direction: column; }
.vox-author-copy h3 { font-size: 2.5rem; margin: 24px 0 12px; unicode-bidi: isolate; }
.vox-title-chip {
    align-self: center;
    background: #F1EAED;
    border-radius: 2px;
    color: var(--vox-burgundy);
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.6;
    max-width: 100%;
    overflow: hidden;
    padding: 5px 13px;
    text-overflow: ellipsis;
    unicode-bidi: isolate;
    white-space: nowrap;
}
.vox-author-card:nth-of-type(3n+2) .vox-title-chip { background: #FDF3E2; color: #8A5600; }
.vox-author-card:nth-of-type(3n) .vox-title-chip { background: #EAF0FA; color: var(--vox-cobalt); }
.vox-profile-cta { align-items: center; border-top: 1px solid var(--vox-line); display: flex; font-size: 1.3rem; font-weight: 800; justify-content: space-between; margin-top: auto; padding-top: 24px; }
.vox-profile-cta svg { fill: none; height: 20px; stroke: currentColor; stroke-width: 1.8; width: 20px; }

.vox-rank-box {
    align-items: center;
    background: var(--vox-ink);
    color: #fff;
    display: flex;
    font-weight: 800;
    gap: 2px;
    height: 44px;
    justify-content: center;
    left: 18px;
    position: absolute;
    top: 18px;
    width: 44px;
}
.vox-rank-box[hidden] { display: none; }
.vox-rank-number { font-size: 1.3rem; unicode-bidi: isolate; }
.vox-rank-movement { display: inline-flex; }
.vox-rank-arrow { display: none; fill: none; height: 11px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 11px; }
.vox-movement-up .vox-rank-up,
.vox-movement-down .vox-rank-down,
.vox-movement-steady .vox-rank-steady { display: block; }

.vox-join-card {
    background:
        radial-gradient(circle at 10% 10%, rgba(74,37,53,.8), transparent 34%),
        radial-gradient(circle at 90% 90%, rgba(26,61,124,.65), transparent 35%),
        #050505;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 430px;
    overflow: hidden;
    padding: 38px 34px;
    position: relative;
}
.vox-join-card::after { border: 1px solid rgba(212,134,11,.5); border-radius: 50%; content: ""; height: 180px; left: -80px; position: absolute; top: -70px; width: 180px; }
.vox-join-mark { align-items: center; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; display: flex; height: 54px; justify-content: center; margin-bottom: 28px; width: 54px; }
.vox-join-mark svg { fill: none; height: 25px; stroke: #fff; stroke-width: 1.5; width: 25px; }
.vox-join-kicker { color: rgba(255,255,255,.65); }
.vox-join-card h2 { color: #fff; font-size: 3.2rem; margin: 0 0 15px; }
.vox-join-card > p:not(.vox-join-kicker) { color: rgba(255,255,255,.78); font-size: 1.45rem; line-height: 1.9; margin: 0; }
.vox-button { align-items: center; align-self: flex-start; display: inline-flex; font-size: 1.4rem; font-weight: 800; justify-content: center; margin-top: 28px; min-height: 46px; padding: 0 22px; text-decoration: none !important; }
.vox-button-light { background: #fff; color: #080808 !important; }
.vox-button-light:hover { background: var(--vox-amber-hover); }

.vox-profile-header { background: #fff; padding-bottom: 64px; }
.vox-cover { background: #111; height: clamp(300px, 38vw, 540px); overflow: hidden; }
.vox-cover img { height: 100%; object-fit: cover; width: 100%; }
.vox-cover-fallback {
    background:
        radial-gradient(circle at 18% 30%, rgba(74,37,53,.48), transparent 33%),
        radial-gradient(circle at 73% 15%, rgba(212,134,11,.24), transparent 25%),
        radial-gradient(circle at 77% 90%, rgba(26,61,124,.5), transparent 36%),
        #070707;
}
.vox-profile-inner { margin: 0 auto; position: relative; }
.vox-avatar-wrap { background: #fff; border-radius: 50%; height: 190px; margin-top: -95px; padding: 7px; position: relative; width: 190px; z-index: 2; }
.vox-avatar { border: 4px solid var(--vox-burgundy); border-radius: 50%; height: 100%; object-fit: cover; width: 100%; }
.vox-avatar-fallback { background: #111; color: #fff; display: block; font-size: 0; line-height: 168px; overflow: hidden; text-align: center; white-space: nowrap; }
.vox-avatar-fallback::first-letter { font-size: 5.8rem; font-weight: 800; }
.vox-profile-staff .vox-avatar { border-color: var(--vox-ink); }
.vox-profile-intro { max-width: 850px; padding-top: 28px; }
.vox-profile-intro .vox-kicker { color: var(--vox-burgundy); }
.vox-profile-intro .vox-kicker a { color: inherit; text-decoration: none; }
.vox-profile-intro .vox-kicker a:hover,
.vox-profile-intro .vox-kicker a:focus-visible { text-decoration: underline; text-underline-offset: .22em; }
.vox-profile-intro h1 { color: var(--vox-ink); font-size: clamp(3.2rem, 5vw, 5.8rem); line-height: 1.3; margin: 0 0 14px; unicode-bidi: isolate; }
.vox-profile-title { color: var(--vox-cobalt); font-size: 1.65rem; font-weight: 800; margin: 0 0 14px; unicode-bidi: isolate; }
.vox-profile-bio { color: #4C4C4C; font-size: 1.65rem; line-height: 1.95; margin: 0; max-width: 800px; unicode-bidi: isolate; }
.vox-company { align-items: center; direction: rtl; display: inline-flex; gap: 10px; margin-top: 14px; }
.vox-company-label { color: var(--vox-muted); font-size: 1.2rem; font-weight: 700; }
.vox-company-logo { background: #fff; border: 1px solid rgba(30,92,63,.24); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.08); height: 32px; max-width: 160px; object-fit: contain; padding: 5px 7px; width: auto; }
.vox-profile-actions { align-items: center; border-bottom: 1px solid var(--vox-line); border-top: 1px solid var(--vox-line); display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; margin-top: 34px; padding: 18px 0; }
.vox-socials,
.vox-share-bar { align-items: center; display: flex; flex-wrap: wrap; gap: 10px; }
.vox-actions-label,
.vox-share-label { color: #555; font-size: 1.2rem; font-weight: 800; margin-inline-end: 2px; }
.vox-social-link,
.vox-share-link { align-items: center; background: #fff; border: 1px solid #ddd; border-radius: 50%; color: #111; cursor: pointer; display: inline-flex; height: 40px; justify-content: center; padding: 0; transition: background .15s, border-color .15s, color .15s; width: 40px; }
.vox-social-link .icon,
.vox-share-link .icon,
.vox-social-link svg,
.vox-share-link svg { fill: currentColor; height: 19px; width: 19px; }
.vox-social-link > svg { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.vox-social-link:hover { border-color: var(--vox-burgundy); color: var(--vox-burgundy); }
.vox-share-link:hover { background: var(--vox-cobalt); border-color: var(--vox-cobalt); color: #fff; }
.vox-share-copy.vox-share-copied { background: var(--vox-burgundy); border-color: var(--vox-burgundy); color: #fff; }

.vox-articles { background: var(--vox-soft); padding: 74px 4vmin 100px; }
.vox-section-head-articles > div { border-right-color: var(--vox-amber); }
.vox-post-feed { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vox-pagination { margin-top: 44px; }

@media (max-width: 960px) {
    .vox-wall-grid,
    .vox-post-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vox-profile-inner { padding-left: 5vw; padding-right: 5vw; }
}

@media (max-width: 640px) {
    .vox-hub-hero,
    .vox-hub-hero-inner { min-height: 390px; }
    .vox-hub-hero-inner { padding: 55px 6vw; }
    .vox-hub-hero h1 { font-size: 4.5rem; }
    .vox-wall { padding: 52px 5vw 70px; }
    .vox-wall-grid,
    .vox-post-feed { grid-template-columns: 1fr; }
    .vox-section-head { align-items: start; flex-direction: column; }
    .vox-author-card,
    .vox-join-card { min-height: 400px; }
    .vox-cover { height: 280px; }
    .vox-avatar-wrap { height: 146px; margin-top: -73px; width: 146px; }
    .vox-avatar-fallback { line-height: 124px; }
    .vox-profile-header { padding-bottom: 46px; }
    .vox-profile-actions { align-items: flex-start; flex-direction: column; }
    .vox-socials,
    .vox-share-bar { width: 100%; }
    .vox-actions-label,
    .vox-share-label { flex-basis: 100%; }
    .vox-articles { padding: 54px 5vw 72px; }
}

@media (prefers-reduced-motion: reduce) {
    .vox-author-card { transition: none; }
}

@media print {
    .vox-hub-hero { min-height: auto; }
    .vox-hub-hero-inner { min-height: auto; padding: 28px; }
    .vox-hub-hero-glow,
    .vox-join-card,
    .vox-profile-actions,
    .vox-pagination { display: none !important; }
    .vox-wall,
    .vox-articles { padding: 24px 0; }
    .vox-wall-grid,
    .vox-post-feed { display: grid; grid-template-columns: repeat(2, 1fr); }
    .vox-author-card { break-inside: avoid; box-shadow: none; min-height: 0; }
    .vox-cover { height: 220px; }
}

/* === Voice Branch DNA v1.0: Deep Emerald section identity (2026-07-19) ===
   Emerald frames the section; the three edition colors keep decorating the people. */
.vox-kicker,.vox-section-kicker{color:#3B7E5E!important}
.vox-hub .vox-section-kicker,.vox-articles .vox-section-kicker{color:#1E5C3F!important}
.vox-rank-box{background:#1E5C3F!important;color:#fff!important}
.vox-movement-up .vox-rank-up{stroke:#3B7E5E}
.vox-profile-cta{color:#1E5C3F!important}
.vox-profile-cta svg{stroke:#1E5C3F}

/* === Owner annotation batch 2026-07-19: bigger الصوت + full emerald enforcement === */
.vox-kicker{font-size:1.9rem!important;font-weight:800}
.vox-hub-hero .vox-kicker{font-size:2.3rem!important;color:#3B7E5E!important}
.vox-profile-intro .vox-kicker{font-size:2rem!important;color:#1E5C3F!important}
.vox-author-card .vox-portrait-wrap{border-color:#1E5C3F!important;box-shadow:0 0 30px rgba(30,92,63,.4)}
.vox-author-card:nth-of-type(2n) .vox-portrait-wrap{border-color:#3B7E5E!important}
.vox-section-head > div{border-right-color:#1E5C3F!important}
.vox-section-head-articles > div{border-right-color:#1E5C3F!important}
.vox-profile-title{color:#1E5C3F!important}
.vox-profile-title-en{color:#3B7E5E;direction:ltr;text-align:right;unicode-bidi:isolate;font-size:1.3rem;font-weight:700;margin:-6px 0 14px;line-height:1.6}
.vox-share-link svg,.vox-share-link .icon{width:20px!important;height:20px!important;fill:none!important;stroke:currentColor!important}
.vox-share-copy.vox-share-copied{background:#1E5C3F!important;border-color:#1E5C3F!important}

/* === Batch 4 (2026-07-19): EN headline beside avatar + country under it === */
.vox-avatar-row{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}
.vox-avatar-row .vox-avatar-wrap{flex:0 0 auto}
.vox-topline-en{flex:1 1 260px;direction:ltr;unicode-bidi:isolate;text-align:left;padding-bottom:22px;min-width:0}
.vox-topline-en .vox-profile-title-en{color:#3B7E5E;font-size:1.4rem;font-weight:800;letter-spacing:.3px;line-height:1.65;margin:0}
.vox-country{text-align:center;margin:10px 0 0;font-size:1.25rem;font-weight:700;color:#6b6b6b}
@media(max-width:640px){.vox-avatar-row{gap:14px}.vox-topline-en{padding-bottom:8px}}

/* === Fix EN-highlights display (2026-07-19): row collapse from avatar's -95px overlap === */
.vox-avatar-row{display:flex;align-items:flex-end;gap:26px;flex-wrap:nowrap}
.vox-topline-en{flex:1 1 auto;min-width:0;align-self:flex-end;padding-bottom:14px}
.vox-topline-en .vox-profile-title-en{overflow-wrap:break-word;word-break:normal;max-width:62ch;margin:0}
@media(max-width:760px){
  .vox-avatar-row{flex-direction:column;align-items:flex-start;gap:8px}
  .vox-topline-en{width:100%;padding:4px 0 0;align-self:auto}
  .vox-topline-en .vox-profile-title-en{font-size:1.25rem;line-height:1.7}
}

/* === EN headline + country: normal flow, overlap-proof (2026-07-19 final) === */
.vox-avatar-row{display:block}
.vox-topline-en{padding:0;margin:0 0 10px}
.vox-topline-en .vox-profile-title-en{color:#3B7E5E;direction:ltr;unicode-bidi:isolate;text-align:right;font-size:1.3rem;font-weight:700;line-height:1.7;margin:0;max-width:none}
.vox-profile-intro .vox-country{text-align:right;margin:0 0 16px;font-size:1.3rem;font-weight:700;color:#6b6b6b}

/* === «الكرسي» hero crop safety (2026-07-19): faces top-left-ish, never cut heads === */
.vox-cover img{object-position:40% 0}

/* Voice house-color title pills: fixed 2026-07-21 */
.vox-author-card .vox-title-chip,.vox-author-card:nth-of-type(3n+2) .vox-title-chip,.vox-author-card:nth-of-type(3n) .vox-title-chip{background:#F1F7F3!important;color:#1E5C3F!important;border:1px solid rgba(30,92,63,.16);border-radius:999px}
