/* ============================================================
   design-v2.css  —  Karadsheh Family Tree design system
   Palette: olive / sand / ivory / charcoal / gold
   Fonts:   the reader's system font (Latin) + Noto Naskh Arabic (Arabic)
   ============================================================ */

/* ── Design tokens ───────────────────────────────────────── */
:root {
    --olive-900: oklch(0.32 0.045 130);
    --olive-700: oklch(0.41 0.045 130);   /* primary */
    --olive-500: oklch(0.55 0.05 130);
    --olive-100: oklch(0.92 0.025 130);

    --sand-700:  oklch(0.62 0.045 80);
    --sand-500:  oklch(0.81 0.045 80);
    --sand-300:  oklch(0.88 0.035 80);
    --sand-100:  oklch(0.94 0.022 82);

    --ivory-100: oklch(0.965 0.008 85);   /* page bg */
    --ivory-200: oklch(0.94  0.012 82);
    --ivory-300: oklch(0.90  0.018 80);

    --char-900:  oklch(0.22 0 0);
    --char-700:  oklch(0.34 0 0);
    --char-500:  oklch(0.48 0.005 60);
    --char-300:  oklch(0.65 0.005 60);

    --gold-500:  oklch(0.68 0.085 80);
    --gold-700:  oklch(0.58 0.085 75);

    --rust-500:  oklch(0.55 0.13 45);

    --fg:        var(--char-900);
    --fg-muted:  var(--char-500);
    --fg-faint:  var(--char-300);
    --bg:        var(--ivory-100);
    --bg-warm:   var(--sand-100);
    --line:      oklch(0.85 0.018 75);
    --line-strong: oklch(0.75 0.022 75);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    /* One family, the reader's own. No webfont is downloaded for Latin text:
       the page paints on first byte and looks native on whatever the family is
       reading on. Hierarchy is carried by size and weight, not by a second
       typeface -- which is why display and body point at the same stack rather
       than display being folded away. Giving a serif back to headings later is
       a one-line change here, and every call site already asks for the token.

       One exception, and only one: the homepage hero headline keeps Cormorant
       Garamond, loaded in profile_list.html so that only that page pays for
       it. It is the single place set large enough for a display serif to look
       like one.

       Arabic is the exception and keeps a real webfont: system Arabic ranges
       from good (SF Arabic) to poor, and Arabic names are first-class content
       here, not decoration.

       Google serves it behind a unicode-range, so in principle it only travels
       to readers who render an Arabic glyph -- but the language toggle in the
       nav IS an Arabic glyph, so in practice every page pays ~111 KB for the
       'ع'. Worth knowing before optimising: labelling that toggle 'AR' would
       defer the download to pages that actually show Arabic names. */
    --font-system:  system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                    Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-display: var(--font-system);
    --font-body:    var(--font-system);
    --font-arabic:  'Noto Naskh Arabic', 'Amiri', serif;
    --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                    'Liberation Mono', monospace;

    --shadow-soft: 0 1px 2px rgba(60,50,30,0.04), 0 8px 24px rgba(60,50,30,0.06);
    --shadow-lift: 0 2px 4px rgba(60,50,30,0.06), 0 16px 40px rgba(60,50,30,0.10);

    /* Override legacy variables from base.html */
    --primary-color:   oklch(0.41 0.045 130);
    --secondary-color: oklch(0.68 0.085 80);
    --bg-light:        oklch(0.965 0.008 85);
}

/* ── Base overrides ──────────────────────────────────────── */
body {
    background-color: var(--ivory-100) !important;
    color: var(--fg);
    font-family: var(--font-body);
}

/* ── Display typography ──────────────────────────────────── */
.display {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.05;
}
.display-xl { font-size: clamp(48px, 7vw, 96px); }
.display-lg { font-size: clamp(36px, 5vw, 60px); }
.display-md { font-size: clamp(28px, 3.6vw, 44px); }

/* ── Eyebrow ─────────────────────────────────────────────── */
.eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--olive-700);
}
.muted { color: var(--fg-muted); }
.ar    { font-family: var(--font-arabic); font-weight: 500; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
    text-decoration: none;
    white-space: nowrap;
    font-family: var(--font-body);
}

.btn-primary {
    background: var(--olive-700);
    color: var(--ivory-100) !important;
    border-color: transparent;
}
.btn-primary:hover {
    background: var(--olive-900);
    color: var(--ivory-100) !important;
}

.btn-ghost {
    background: transparent;
    color: var(--char-900);
    border-color: var(--line-strong);
}
.btn-ghost:hover {
    background: var(--ivory-200);
    color: var(--char-900);
    text-decoration: none;
}

.btn-gold {
    background: var(--gold-500);
    color: var(--char-900) !important;
    border-color: transparent;
}
.btn-gold:hover {
    background: var(--gold-700);
    color: var(--ivory-100) !important;
}

.btn-sm { padding: 8px 14px; font-size: 13px; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 2px 8px oklch(0.22 0 0 / 0.06);
    transition: box-shadow 0.2s;
}
.card:hover {
    box-shadow: 0 6px 20px oklch(0.22 0 0 / 0.11);
    transform: none;   /* override base.html's translateY(-2px) */
}

/* ── Chips / badges ──────────────────────────────────────── */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.chip-olive {
    background: var(--olive-100);
    color: var(--olive-700);
}

.chip-sand {
    background: var(--sand-300);
    color: var(--sand-700);
}

.chip-gold {
    background: oklch(0.95 0.04 85);
    color: var(--gold-700);
}

.chip-charcoal {
    background: oklch(0.28 0.01 60);
    color: oklch(0.82 0.02 75);
    border-color: oklch(0.35 0.01 60);
}

/* ── Eyebrow text ────────────────────────────────────────── */
.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--fg-muted);
}

/* ── Sticky top bar for sub-pages ────────────────────────── */
.prof-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--ivory-100);
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.prof-topbar a {
    color: var(--olive-700);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.prof-topbar a:hover {
    color: var(--olive-900);
}

.prof-topbar .topbar-sep {
    color: var(--char-300);
    font-size: 0.8rem;
}

.prof-topbar .topbar-name {
    color: var(--fg);
    font-size: 0.9rem;
    font-weight: 500;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Page heading block ──────────────────────────────────── */
.page-head {
    text-align: center;
    padding: 3rem 1rem 2rem;
}

.page-head .eyebrow {
    margin-bottom: 0.75rem;
}

.page-head h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 300;
    color: var(--char-900);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.page-head .lead {
    font-size: 1rem;
    color: var(--fg-muted);
    max-width: 560px;
    margin: 0 auto;
}

/* ── Section spacing ─────────────────────────────────────── */
.section {
    padding: 3rem 0;
}

.section-tight {
    padding: 1.5rem 0;
}

/* ── Stats strip ─────────────────────────────────────────── */
.stats-strip {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1.25rem 1rem;
    background: var(--ivory-200);
    border-radius: 12px;
    margin-top: 1.5rem;
}

.stats-strip .stat-item {
    text-align: center;
}

.stats-strip .stat-num {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--olive-700);
    line-height: 1;
}

.stats-strip .stat-label {
    font-size: 0.72rem;
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 2px;
}

/* ── Profile card (v2) ───────────────────────────────────── */
.profile-card-v2 {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--fg);
    transition: box-shadow 0.2s;
    height: 100%;
}

.profile-card-v2:hover {
    box-shadow: 0 6px 20px oklch(0.22 0 0 / 0.10);
    color: var(--fg);
    text-decoration: none;
}

.profile-card-v2 .avatar-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--olive-700), var(--gold-500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.75rem;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-card-v2 .avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-card-v2 .card-name {
    font-size: 1rem;
    font-weight: 500;
    color: var(--char-900);
    margin-bottom: 2px;
}

.profile-card-v2 .card-sub {
    font-size: 0.78rem;
    color: var(--fg-muted);
    margin-bottom: 6px;
}

/* ── Sidebar layout (profile detail) ────────────────────── */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 900px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Section dividers inside detail page ─────────────────── */
.detail-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}

.detail-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--olive-700);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ── Sticky tab bar ──────────────────────────────────────── */
.detail-tabs {
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--ivory-100);
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.detail-tabs::-webkit-scrollbar {
    display: none;
}

.detail-tab {
    flex-shrink: 0;
    padding: 0.75rem 1.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--fg-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
    cursor: pointer;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
}

.detail-tab:hover {
    color: var(--olive-700);
}

.detail-tab.active {
    color: var(--olive-700);
    border-bottom-color: var(--olive-700);
}

/* ── Sidebar quick-facts card ────────────────────────────── */
.sidebar-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.sidebar-card-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-muted);
    margin-bottom: 0.75rem;
}

.quick-fact {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.85rem;
}

.quick-fact:last-child {
    border-bottom: none;
}

.quick-fact-label {
    color: var(--fg-muted);
    flex-shrink: 0;
    font-size: 0.8rem;
}

.quick-fact-value {
    color: var(--fg);
    text-align: right;
    font-weight: 500;
}

.quick-fact-value a {
    color: var(--olive-700);
    text-decoration: none;
}

.quick-fact-value a:hover {
    text-decoration: underline;
}

/* ── Life timeline ───────────────────────────────────────── */
.timeline {
    position: relative;
    padding-left: 1.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: var(--line);
}

.timeline-item {
    position: relative;
    margin-bottom: 1.25rem;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -1.5rem;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--olive-500);
    border: 2px solid var(--ivory-100);
}

.timeline-item.kind-birth::before   { background: var(--olive-700); }
.timeline-item.kind-marriage::before { background: var(--gold-500); }
.timeline-item.kind-death::before   { background: var(--char-500); }
.timeline-item.kind-milestone::before { background: var(--sand-700); }

.timeline-year {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fg-muted);
    margin-bottom: 2px;
}

.timeline-title {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--fg);
}

.timeline-body {
    font-size: 0.82rem;
    color: var(--fg-muted);
    margin-top: 2px;
}

/* ── Empty-state block ───────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--fg-muted);
}

.empty-state i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
    opacity: 0.4;
}

.empty-state p {
    font-size: 0.88rem;
    margin: 0;
}

/* ── CTA help block ──────────────────────────────────────── */
.cta-block {
    background: var(--olive-100);
    border: 1px dashed var(--olive-500);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.cta-block p {
    font-size: 0.9rem;
    color: var(--olive-900);
    margin-bottom: 0.75rem;
}

/* ── Hero avatar (profile detail) ───────────────────────── */
.hero-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--olive-700), var(--gold-500));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
    margin: 0 auto 1rem;
}

.hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Search bar (v2 reskin) ──────────────────────────────── */
.search-v2 {
    position: relative;
    max-width: 560px;
    margin: 1.5rem auto 0;
}

.search-v2 i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--fg-muted);
    font-size: 15px;
    pointer-events: none;
}

.search-v2 input {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.6rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 0.95rem;
    color: var(--fg);
    transition: border-color 0.18s, box-shadow 0.18s;
}

.search-v2 input:focus {
    outline: none;
    border-color: var(--olive-500);
    box-shadow: 0 0 0 3px oklch(0.55 0.05 130 / 0.15);
}

/* ── Site header (sticky, transparent → frosted) ────────── */
/* The header's own height, published so a page can reach up underneath it.
   It is content (53px) plus the inner padding, and there is no CSS way to read
   that back, so the two values are written here beside the padding that
   produces them. */
:root { --header-h: 89px; }
@media (max-width: 720px) { :root { --header-h: 81px; } }

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.25s, border-color 0.25s, backdrop-filter 0.25s;
    background: transparent;
    border-bottom: 1px solid transparent;
}
.site-header.is-scrolled {
    background: oklch(0.97 0.012 85 / 0.88);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: var(--line);
}
/* Three columns: brand | nav (centred) | actions.
   The nav used to sit hard-left next to the brand, which meant the "Family
   Tree" dropdown — centred on its own item and 280px wide — hung off the left
   edge of the viewport and got clipped. Centring the nav gives the menu room
   on both sides and balances the header.
   Columns are assigned EXPLICITLY: some pages hide the brand (tree pages
   render it 0-wide/display:none), and with auto-placement that shifted every
   child left one column — nav ended up in column 1, i.e. left-aligned. */
.site-header__inner {
    display: grid;
    /* 1fr | auto | 1fr: equal flexible side columns keep the nav on the page
       centreline even when brand and actions differ in width (the tree pages
       hide the brand entirely). auto|1fr|auto only centres the nav within its
       own column, which drifts left whenever the right side is heavy. */
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 32px;
    padding: 18px 32px;
}
.site-header__inner > .brand        { grid-column: 1; justify-self: start; }
.site-header__inner > .site-nav     { grid-column: 2; }
.site-header__inner > .site-actions { grid-column: 3; justify-self: end; }
@media (max-width: 720px) { .site-header__inner { padding: 14px 20px; } }
/* Below 1080px the nav is hidden (mobile menu takes over) and the tree pages
   lay a search bar out inside .site-actions with space-between — the original
   flex header handled all of that, so simply restore it there. */
@media (max-width: 1080px) {
    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    /* The menu trigger is the first child now, so space-between would strand
       the brand in the middle of the header. An auto margin on the brand takes
       the free space instead and keeps the pair together on the left.

       The tree pages opt out: their .site-actions is flex:1 so the search bar
       can take half the header, and an auto margin here would swallow the free
       space that flex-grow needs, collapsing the search to its content width. */
    .site-header__inner > .brand { margin-right: auto; }
    body.page-tree .site-header__inner > .brand { margin-right: 0; }
}

/* Brand */
.brand {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: var(--char-900); flex-shrink: 0;
}
.brand__mark {
    width: 52px; height: 52px; border-radius: 999px; overflow: hidden; flex-shrink: 0;
    box-shadow: 0 1px 3px oklch(0.42 0.05 130 / 0.15);
}
.brand__logo { width: 100%; height: 100%; object-fit: cover; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
    font-family: var(--font-display);
    font-weight: 600; font-size: 26px; letter-spacing: -0.005em;
}
.brand__sub {
    font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--olive-700); margin-top: 4px; font-weight: 500;
}
@media (max-width: 720px) { .brand__sub { display: none; } }

/* Desktop nav */
.site-nav {
    display: flex; gap: 28px; align-items: center;
}
.site-nav__link {
    font-size: 14px; font-weight: 500; color: var(--char-700);
    text-decoration: none; position: relative; padding: 4px 0;
}
.site-nav__link:hover { color: var(--olive-700); }
.site-nav__link::after {
    content: ''; position: absolute; inset: auto 0 -2px 0; height: 1px;
    background: var(--olive-700); transform: scaleX(0); transform-origin: center;
    transition: transform 0.18s;
}
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__link--has-menu { display: inline-flex; align-items: center; gap: 4px; }

/* Nav dropdown */
.site-nav__group { position: relative; }
.site-nav__menu {
    position: absolute; top: calc(100% + 14px); left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 280px; padding: 8px;
    background: var(--ivory-100); border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 18px 40px oklch(0.22 0.02 60 / 0.12), 0 2px 6px oklch(0.22 0.02 60 / 0.06);
    display: flex; flex-direction: column; gap: 2px;
    opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    z-index: 30;
}
.site-nav__menu::before {
    content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}
.site-nav__group:hover .site-nav__menu,
.site-nav__group:focus-within .site-nav__menu {
    opacity: 1; pointer-events: auto; visibility: visible;
    transform: translateX(-50%) translateY(0); transition-delay: 0s;
}
.site-nav__menu-item {
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; border-radius: var(--radius-md);
    text-decoration: none; color: var(--char-900); transition: background 0.12s;
}
.site-nav__menu-item:hover { background: var(--ivory-200); }
.site-nav__menu-label { font-size: 14px; font-weight: 500; }
.site-nav__menu-sub   { font-size: 12px; line-height: 1.4; color: var(--fg-muted); }

/* Actions */
.site-actions { display: flex; align-items: center; gap: 12px; }
/* No outline. These sit over the hero's mosaic, and three pale rings floating
   on it read as chrome bolted to the page. The hit area is unchanged — only
   the border is gone — and hover still gives feedback. */
.lang-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid transparent; background: transparent;
    color: var(--char-500); font-size: 12px; font-weight: 500; cursor: pointer;
    transition: background .15s, color .15s;
}
.lang-toggle:hover { background: oklch(0.42 0.05 130 / 0.07); color: var(--char-900); }
.lang-toggle .is-active  { color: var(--char-900); }
.lang-toggle .ar.is-active { color: var(--olive-700); }

/* Hamburger / close */
/* Published as a token because the tree-page header has to add it back: the
   trigger sits outside .site-actions, so a percentage of that container falls
   short of a percentage of the header by exactly this much. Change the icon or
   the padding and this has to follow, which is why it lives next to them. */
:root { --menu-trigger-w: 44px; }

.menu-trigger, .menu-close {
    display: none; padding: 8px; border-radius: 999px;
    border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--char-700);
    transition: background .15s;
}

/* Mobile breakpoints */
@media (max-width: 1080px) {
    .site-nav { display: none; }
    .header-signin { display: none; }
    .menu-trigger { display: inline-flex; align-items: center; }
    .menu-trigger:hover, .menu-close:hover { background: oklch(0.42 0.05 130 / 0.07); }
}
@media (max-width: 720px) {
    .header-cta { display: none; }
}

/* Mobile menu: Facebook's, approved on the design canvas (Tree Controls & Nav,
   "The ☰ menu · proposed", A). Your card; the places the bottom bar does not
   reach, as tiles; your account; Sign out. White cards on the ivory the panel
   is, and all of it on one screen. The panel scrolls only when a small phone
   or large text needs it to. */
.mobile-menu {
    position: fixed; inset: 0; z-index: 3000;
    pointer-events: none; opacity: 0; transition: opacity 0.2s;
}
.mobile-menu.is-open { pointer-events: auto; opacity: 1; }
.mobile-menu__scrim {
    position: absolute; inset: 0;
    background: rgba(20,18,12,0.4); backdrop-filter: blur(4px);
}
/* Anchored left, to the side the trigger is on. A button on one edge opening a
   panel from the other reads as two unrelated things happening at once, and
   leaves the thumb that pressed it across the screen from what it opened. */
.mobile-menu__panel {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: min(360px, 90vw); box-sizing: border-box; background: var(--ivory-200);
    display: flex; flex-direction: column; gap: 14px;
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(20px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain;
    font-family: var(--font-body); line-height: 1.5; color: var(--char-900);
    transform: translateX(-100%); transition: transform 0.25s ease-out;
    box-shadow: 20px 0 60px rgba(0,0,0,0.15); z-index: 1;
}
.mobile-menu.is-open .mobile-menu__panel { transform: translateX(0); }

.mm-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 0 4px; }
.mm-title { margin: 0; font-family: var(--font-body); font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--char-900); }
.mobile-menu .menu-close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: var(--ivory-300); color: var(--char-900);
}
.mobile-menu .menu-close:hover { background: var(--sand-300); }

.mm-card { background: #fff; border-radius: 14px; box-shadow: 0 1px 2px rgba(60,50,30,.10); }
a.mm-card:hover, a.mm-row:hover { background: var(--ivory-100); }

/* You: the person you claimed, and your face. */
.mm-me { display: flex; align-items: center; gap: 12px; padding: 12px; text-decoration: none; color: inherit; }
.mm-me__face {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; object-fit: cover;
    background: var(--sand-300); color: var(--char-700);
    display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 600;
}
.mm-me__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mm-me__line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mm-me__name { font-size: 16px; font-weight: 600; color: var(--char-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-me__badge {
    flex-shrink: 0; padding: 1px 8px; border-radius: 999px;
    background: var(--olive-100); color: var(--olive-700); font-size: 11.5px; font-weight: 600;
}
.mm-me__sub { font-size: 13.5px; color: var(--char-500); }
.mm-chev { flex-shrink: 0; color: var(--char-300); }
.mobile-menu__panel[dir="rtl"] .mm-chev { transform: scaleX(-1); }

.mm-section { display: flex; flex-direction: column; gap: 8px; }
.mm-label { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--char-500); }

/* Explore: two tiles a row, as on Facebook; Review, the Council's, across both. */
.mm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mm-tile {
    min-height: 78px; box-sizing: border-box; padding: 12px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
    text-decoration: none; color: var(--char-900); font-size: 15.5px; font-weight: 600; line-height: 1.25;
}
.mm-tile svg { color: var(--olive-700); flex-shrink: 0; }
.mm-tile--story svg { color: var(--gold-700); }
.mm-tile--archive svg { color: var(--olive-500); }
.mm-tile--map svg { color: var(--rust-500); }
.mm-tile--wide { grid-column: span 2; min-height: 64px; flex-direction: row; align-items: center; gap: 12px; }
.mm-tile__text { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.mm-tile__sub { font-size: 13px; font-weight: 400; color: var(--char-500); }
.mm-count {
    min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 7px; flex-shrink: 0;
    border-radius: 999px; background: var(--rust-500); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700;
}
.mm-count--olive { background: var(--olive-700); }

/* Your account: one card of rows, the language among them. */
.mm-list { overflow: hidden; }
.mm-row {
    position: relative; min-height: 52px; box-sizing: border-box;
    display: flex; align-items: center; gap: 12px; padding: 0 14px;
    text-decoration: none; color: var(--char-900); font-size: 15.5px;
}
.mm-row > svg:first-child { color: var(--char-500); flex-shrink: 0; }
.mm-row + .mm-row::before {
    content: ""; position: absolute; top: 0; inset-inline-start: 48px; inset-inline-end: 0;
    height: 1px; background: oklch(0.91 0.012 80);
}
.mm-row__label { flex: 1 1 auto; min-width: 0; }
.mm-row--lang { padding-inline-end: 8px; }
.mm-seg { display: flex; padding: 3px; border-radius: 999px; background: var(--ivory-100); border: 1px solid oklch(0.91 0.012 80); }
.mm-seg__opt {
    min-width: 44px; height: 34px; box-sizing: border-box; padding: 0 12px; border: 0; border-radius: 999px;
    background: transparent; color: var(--char-500); cursor: pointer;
    font-family: var(--font-body); font-size: 13px; font-weight: 600;
}
.mm-seg__opt[aria-pressed="true"] { background: var(--olive-700); color: var(--ivory-100); }
.mm-seg__opt[lang="ar"] { font-size: 15px; font-weight: 400; }

/* Sign out, or Sign in: a real button, at the foot of the menu. */
.mm-end { margin: auto 0 0; }
.mm-end__btn {
    width: 100%; height: 48px; box-sizing: border-box; border: 0; border-radius: 12px;
    background: var(--ivory-300); color: var(--char-900); cursor: pointer; text-decoration: none;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-family: var(--font-body); font-size: 15.5px; font-weight: 600;
}
.mm-end__btn:hover { background: var(--sand-300); color: var(--char-900); text-decoration: none; }
.mm-card:focus-visible, .mm-row:focus-visible, .mm-seg__opt:focus-visible, .mm-end__btn:focus-visible,
.mobile-menu .menu-close:focus-visible { outline: 2px solid var(--olive-700); outline-offset: 2px; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
    background: var(--ivory-200);
    border-top: 1px solid var(--line);
    padding: 64px 0 32px;
}
.site-footer .footer__grid {
    display: grid; gap: 40px; grid-template-columns: 1.5fr 1fr 1fr 1fr;
}
@media (max-width: 980px) { .site-footer .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer .footer__grid { grid-template-columns: 1fr; } }
.site-footer .footer__brand .brand__name { display: block; margin-bottom: 12px; }
.site-footer .footer__tagline { font-size: 14px; max-width: 320px; color: var(--fg-muted); }
.site-footer .footer__small  { font-size: 12px; line-height: 1.6; margin-top: 16px; color: var(--fg-muted); }
.site-footer .footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer .footer__col h4 {
    font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    margin: 0 0 6px; color: var(--olive-700);
}
.site-footer .footer__col a { color: var(--char-700); text-decoration: none; font-size: 14px; }
.site-footer .footer__col a:hover { color: var(--olive-700); }
.site-footer .footer__bottom {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding-top: 32px; margin-top: 48px; border-top: 1px solid var(--line); font-size: 12px;
    color: var(--fg-muted);
}

/* ── Photo placeholders (striped, heritage tones) ───────── */
.ph {
    position: relative;
    width: 100%;
    background: repeating-linear-gradient(
        135deg,
        oklch(0.88 0.03 75) 0 6px,
        oklch(0.84 0.04 75) 6px 12px
    );
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--char-700);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.ph-tone-olive {
    background: repeating-linear-gradient(
        135deg,
        oklch(0.55 0.05 130) 0 6px,
        oklch(0.50 0.06 130) 6px 12px
    );
    color: var(--ivory-200);
}
.ph-tone-charcoal {
    background: repeating-linear-gradient(
        135deg,
        oklch(0.28 0.02 60) 0 6px,
        oklch(0.22 0.02 60) 6px 12px
    );
    color: var(--ivory-200);
}
.ph-tone-gold {
    background: repeating-linear-gradient(
        135deg,
        oklch(0.78 0.08 80) 0 6px,
        oklch(0.72 0.09 80) 6px 12px
    );
}

/* ── Keep Bootstrap dropdown colours ────────────────────── */
.dropdown-menu { background-color: var(--olive-700) !important; }
.dropdown-item:hover { background-color: var(--olive-900) !important; }

/* ── Page shell ──────────────────────────────────────────── */
.prof-page { background: var(--bg); min-height: 100vh; }

/* ── Sub-page topbar structure ───────────────────────────── */
.prof-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.prof-topbar__left  { display: flex; align-items: center; gap: 14px; min-width: 0; }
/* The arrow alone in a round target, the way Facebook does back. Every page
   with this bar used to carry a label and a breadcrumb trail beside it, naming
   a fixed route down the site — but people arrive from the tree, from search,
   or from a link somebody sent them, so the trail described a journey almost
   nobody had made. The arrow calls history.back() instead.

   Written as ".prof-topbar a.prof-topbar__back": ".prof-topbar a" above sets
   colour and outranks a bare class, which paints the arrow link-green. */
.prof-topbar a.prof-topbar__back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; margin-left: -9px; padding: 0;
    gap: 0; color: var(--char-900); text-decoration: none;
    border-radius: 999px; transition: background .15s;
    background: none; border: 0; cursor: pointer;
}
.prof-topbar a.prof-topbar__back:hover {
    background: var(--ivory-200); color: var(--char-900);
}
.prof-topbar a.prof-topbar__back:focus-visible {
    outline: 2px solid var(--olive-700); outline-offset: 2px;
}
/* The same arrow, in the header itself, standing in the cell the hamburger
   occupies everywhere else. A profile is somewhere you arrive from the classic
   tree, the modern tree, the member list or another profile — never from the
   menu — so on that page the menu is what gives up the cell, and the sub-page
   bar that existed only to hold this arrow goes with it. The two of them
   stacked were 138px of chrome above a person's photograph.

   Shown at every width, unlike .menu-trigger: the desktop header has the nav
   but no other way back, and that was the sub-page bar's job too. */
.site-header__back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; padding: 0; margin-left: -9px;
    color: var(--char-900); text-decoration: none;
    background: none; border: 0; border-radius: 999px;
    cursor: pointer; transition: background .15s;
}
.site-header__back:hover { background: var(--ivory-200); color: var(--char-900); }
.site-header__back:focus-visible { outline: 2px solid var(--olive-700); outline-offset: 2px; }

.prof-topbar__actions { display: flex; align-items: center; gap: 12px; }
/* The assurance line. It repeats verbatim in the page body underneath, so on a
   phone it is the first thing to go. */
.prof-topbar__assure {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--fg-muted); white-space: nowrap;
}

/* The crumb rule that used to sit here hid the trail below 720px. There is no
   trail on any page now, and an icon-only arrow needs no narrow-screen help. */
@media (max-width: 720px) {
    .prof-topbar__inner  { flex-wrap: wrap; row-gap: 8px; }
    .prof-topbar__actions { flex-wrap: wrap; }
    .prof-topbar__assure { display: none; }
}

/* ── Form fields ─────────────────────────────────────────── */
.field { margin-bottom: 18px; }
.field__label {
    display: block; font-size: 12px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--char-700); margin-bottom: 8px;
}
.field__input,
.field__textarea,
.field__select {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: oklch(0.99 0.004 85); font-family: inherit;
    font-size: 15px; color: var(--char-900);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; box-sizing: border-box;
}
.field__input:hover,
.field__textarea:hover,
.field__select:hover { background: #fff; }
.field__input:focus,
.field__textarea:focus,
.field__select:focus {
    outline: none; border-color: var(--olive-700);
    box-shadow: 0 0 0 3px oklch(0.41 0.045 130 / 0.15);
}
.field__input:disabled,
.field__textarea:disabled,
.field__select:disabled { background: var(--ivory-200); color: var(--fg-muted); cursor: default; }
.field__hint  { font-size: 12px; color: var(--fg-muted); margin-top: 6px; }
.field__error { font-size: 12px; color: var(--rust-500); margin-top: 6px; }
.field-group  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .field-group { grid-template-columns: 1fr; } }

/* ── Step nav ────────────────────────────────────────────── */
.step-nav {
    display: flex; justify-content: space-between;
    gap: 12px; padding-top: 28px; margin-top: 32px;
    border-top: 1px solid var(--line);
}
@media (max-width: 480px) {
    .step-nav { flex-direction: column-reverse; }
    .step-nav .btn { width: 100%; justify-content: center; }
}

/* ── Trust bar ───────────────────────────────────────────── */
.trust-bar {
    display: flex; align-items: center; gap: 14px;
    background: var(--ivory-200); border: 1px solid var(--line);
    border-radius: var(--radius-sm); padding: 14px 16px;
    font-size: 13px; color: var(--char-700); line-height: 1.5; margin-bottom: 24px;
}
.trust-bar__icon { flex-shrink: 0; color: var(--olive-700); margin-top: 1px; }

/* ── Wizard chrome ───────────────────────────────────────── */
.wiz {
    display: grid; grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px; padding: 48px 0 96px; align-items: start;
}
@media (max-width: 960px) { .wiz { grid-template-columns: 1fr; gap: 32px; padding: 32px 0 64px; } }
.wiz-side { position: sticky; top: 80px; }
@media (max-width: 960px) { .wiz-side { position: static; } }
.wiz-side__title { font-family: var(--font-display); font-size: 22px; font-weight: 500; margin: 0 0 4px; color: var(--char-900); }
.wiz-side__sub   { font-size: 13px; color: var(--fg-muted); margin: 0 0 20px; }
.wiz-stepper     { display: grid; gap: 4px; }
.wiz-step {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 10px 12px; border-radius: var(--radius-sm);
    text-align: left; background: transparent; border: none;
    font-family: inherit; font-size: 13px; color: var(--char-700);
    cursor: pointer; transition: background 0.15s; width: 100%;
}
.wiz-step:hover     { background: var(--ivory-200); }
.wiz-step.is-active { background: var(--olive-100); color: var(--olive-900); }
.wiz-step__num {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--ivory-200); border: 1px solid var(--line-strong);
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600; flex-shrink: 0;
}
.wiz-step.is-active .wiz-step__num { background: var(--olive-700); color: var(--ivory-100); border-color: var(--olive-700); }
.wiz-step.is-done   .wiz-step__num { background: var(--gold-500); color: var(--char-900); border-color: var(--gold-500); }
.wiz-step__title { font-weight: 500; display: block; }
.wiz-step__sub   { display: block; font-size: 11px; color: var(--fg-muted); margin-top: 2px; font-weight: 400; }
.wiz-main { background: var(--ivory-100); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; }
@media (max-width: 720px) { .wiz-main { padding: 24px; } }
.wiz-main__head    { margin-bottom: 28px; }
.wiz-main__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive-700); margin-bottom: 8px; }
.wiz-main__title   { font-family: var(--font-display); font-weight: 500; font-size: 32px; line-height: 1.1; margin: 0 0 8px; color: var(--char-900); }
.wiz-main__lede    { font-size: 15px; color: var(--fg-muted); margin: 0; line-height: 1.55; max-width: 600px; }

/* ── Relationship picker ─────────────────────────────────── */
.rel-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 720px) { .rel-picker { grid-template-columns: 1fr 1fr; } }
.rel-pick {
    border: 1px solid var(--line); background: var(--ivory-100);
    border-radius: var(--radius-md); padding: 14px 10px; text-align: center;
    cursor: pointer; font-family: inherit; font-size: 13px; transition: all 0.15s;
}
.rel-pick:hover     { border-color: var(--line-strong); }
.rel-pick.is-active { background: var(--olive-100); border-color: var(--olive-700); color: var(--olive-900); }
.rel-pick__lbl { font-weight: 500; display: block; }
.rel-pick__sub { display: block; font-size: 11px; color: var(--fg-muted); margin-top: 2px; }

/* ── Anchor selected card ────────────────────────────────── */
.anchor-rel { display: flex; gap: 14px; align-items: center; padding: 14px 16px; background: var(--olive-100); border: 1px solid var(--olive-500); border-radius: var(--radius-md); margin-bottom: 12px; }
.anchor-rel__avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--olive-700); color: var(--ivory-100); display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; font-size: 16px; flex-shrink: 0; }
.anchor-rel__name   { font-size: 15px; font-weight: 500; color: var(--char-900); }
.anchor-rel__meta   { font-size: 12px; color: var(--char-700); margin-top: 2px; }
.anchor-rel__change { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--olive-700); background: transparent; border: none; cursor: pointer; font-family: inherit; }

/* ── Source options (radio cards) ───────────────────────── */
.src-options { display: grid; gap: 10px; }
.src-opt {
    display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--ivory-100); cursor: pointer; font-family: inherit;
    text-align: left; width: 100%;
}
.src-opt:hover     { border-color: var(--line-strong); }
.src-opt.is-active { border-color: var(--olive-700); background: var(--olive-100); }
.src-opt__radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); flex-shrink: 0; margin-top: 2px; display: grid; place-items: center; }
.src-opt.is-active .src-opt__radio { border-color: var(--olive-700); }
.src-opt.is-active .src-opt__radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--olive-700); }
.src-opt__title { font-size: 14px; font-weight: 500; color: var(--char-900); margin-bottom: 2px; display: block; }
.src-opt__sub   { font-size: 12px; color: var(--fg-muted); line-height: 1.5; display: block; }

/* ── Wizard review cards ─────────────────────────────────── */
.review-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--ivory-100); padding: 20px; margin-bottom: 16px; }
.review-card__head  { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.review-card__title { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin: 0; }
.review-card__edit  { font-size: 12px; font-weight: 500; color: var(--olive-700); background: transparent; border: none; cursor: pointer; font-family: inherit; }
.review-card__edit:hover { text-decoration: underline; }
.review-card__rows  { display: grid; gap: 8px; }
.review-row { display: grid; grid-template-columns: 110px 1fr; font-size: 14px; gap: 12px; }
.review-row__lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-muted); padding-top: 2px; }
.review-row__val { color: var(--char-900); }

/* ── Story/form editor shell ─────────────────────────────── */
.story-editor { background: var(--ivory-100); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 36px; }
@media (max-width: 720px) { .story-editor { padding: 20px; } }

/* ── Person search (anchor search) ──────────────────────── */
.people-search { position: relative; margin-bottom: 8px; }
.people-search__input {
    width: 100%; padding: 12px 14px 12px 40px;
    border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
    background: oklch(0.99 0.004 85); font-family: inherit;
    font-size: 15px; color: var(--char-900);
    transition: border-color 0.15s, background 0.15s; box-sizing: border-box;
}
.people-search__input:hover { background: #fff; }
.people-search__input:focus { outline: none; border-color: var(--olive-700); box-shadow: 0 0 0 3px oklch(0.41 0.045 130 / 0.15); }
.people-search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-muted); pointer-events: none; }
.people-results { border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; max-height: 280px; overflow-y: auto; }
.person-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    cursor: pointer; border-bottom: 1px solid var(--line);
    transition: background 0.12s; width: 100%; text-align: left;
    background: transparent; border-left: none; border-right: none; border-top: none;
    font-family: inherit;
}
.person-row:last-child { border-bottom: none; }
.person-row:hover { background: var(--ivory-200); }
.person-row__avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--sand-300); display: grid; place-items: center; font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--olive-900); flex-shrink: 0; border: 1px solid var(--sand-500); }
.person-row__name { font-size: 14px; font-weight: 500; color: var(--char-900); }
.person-row__sub  { font-size: 12px; color: var(--fg-muted); margin-top: 1px; }
/* ── Small screens: room to breathe ──────────────────────────────────────────
   Reported from a phone: hero text ran edge to edge and "legacy" was clipped.
   Two causes. `.container` is styled only by Bootstrap, whose gutter leaves ~12px
   a side — thin on a 390px screen. And the display clamps bottom out at sizes
   chosen for desktop: at 390px, 7vw is 27px so clamp(48px, 7vw, 96px) picks its
   48px floor, which cannot fit "Preserving our legacy" without spilling. */
@media (max-width: 560px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .display-xl { font-size: clamp(31px, 8.4vw, 48px); }
    .display-lg { font-size: clamp(26px, 7vw, 36px); }
    .display-md { font-size: clamp(22px, 5.6vw, 28px); }
}
/* A long name or place must wrap rather than push the page sideways. */
.display, .hero__headline, .prof-hero__name { overflow-wrap: break-word; }


/* ── One menu at a time ──────────────────────────────────────────────────────
   Below 1080px the hamburger drawer appears, and it now carries everything the
   account dropdown held. Two menus offering the same items was the duplication
   Malik circled, so the dropdown stands down here and the drawer is the single
   way in. Above 1080px there is no drawer, so the dropdown is the menu. */
@media (max-width: 1080px) {
    .tb-av { display: none !important; }
    /* Except where there is no drawer for it to stand down to. A profile page
       gives the hamburger's cell to the back arrow, so the drawer is not on
       that page at all — and the bottom nav carries Classic, Modern, Add,
       Search and Me, none of which reach Settings, Sign out, or the way home.
       Without this the dropdown's absence would strand somebody on a profile
       with no route to their own account. */
    body:has(.site-header__back) .tb-av { display: block !important; }
}


/* ── The Karadsheh design system, v1 ─────────────────────────────────────────
   Agreed on the "Karadsheh Design System" canvas, from a review of the search
   and feed screens: warm ivory, forest green, an editorial serif for page
   titles and names, the reader's own sans for everything else, borders before
   shadows, and one profile picture for everyone who has none.

   The colours are the palette above, named for what they do; new work should
   reach for these. The serif is Cormorant Garamond, loaded in base.html; it has
   no Arabic, so Arabic titles and names take the site's Naskh instead. */
:root {
    --forest:      #3F5236;   /* buttons, the tab you are on, ＋ */
    --forest-deep: #293624;   /* strong text, pressed */
    --ivory:       #F7F5EF;   /* every page's background */
    --surface:     #FFFDFC;   /* cards and inputs */
    --beige:       #E8DDC9;   /* the face of someone without a photograph */
    --stone:       #D8D1C5;   /* borders and lines */
    --soft:        #F0ECE4;   /* secondary buttons, the language pill */
    --olive-soft:  #E9E9DE;   /* "See all" buttons: a light, desaturated olive */
    --ink:         #252622;   /* words */
    --muted:       #77756F;   /* second lines */
    --font-title:  'Cormorant Garamond', 'Times New Roman', serif;
}

/* A page's head: what it is, its title, a line about it. */
.page-eyebrow {
    margin: 0; font-size: 12px; line-height: 16px; font-weight: 500;
    letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
}
.page-title {
    margin: 0; font-family: var(--font-title); font-size: 36px; line-height: 40px;
    font-weight: 500; letter-spacing: -.01em; color: var(--ink); text-wrap: balance;
}
.page-lede { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); }
body.ft-ar .page-title { font-family: var(--font-arabic); font-size: 30px; line-height: 44px; font-weight: 600; letter-spacing: 0; }
body.ft-ar .page-eyebrow { letter-spacing: 0; font-size: 14px; }

/* The profile picture of someone without one (tree/_blank_face.html and
   window.ftBlankFace). It fills the circle it is put in. */
.blank-face { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--beige); fill: #C9B795; }
.blank-face--portrait { border-radius: 0; }
.mm-me__face { overflow: hidden; }

/* One header on every page but the trees: the ☰ on its own, the language in
   a soft pill. The trees keep theirs, which float over the drawing. */
.lang-toggle {
    min-height: 40px; padding: 0 16px; box-sizing: border-box;
    background: var(--soft); color: var(--ink); font-size: 14px; font-weight: 500;
}
.lang-toggle:hover { background: #E8E2D6; color: var(--ink); }
.lang-toggle .is-active { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) {
    body:not(.page-tree) .site-header__inner { padding-left: 24px; padding-right: 24px; }
    /* The icon lines up with the page's edge; its touch area reaches past it. */
    body:not(.page-tree) .menu-trigger { margin-left: -10px; }
}
/* 24px at the sides of every page on a phone. */
@media (max-width: 560px) {
    .container { padding-left: 24px; padding-right: 24px; }
}