/* ============================================================
   EVOLUM PORTAL — shared cross-page chrome
   Sits on top of main.css (the Warm Cinema design system).
   Top nav · raise ticker · footer · door cards · slate cards.
   ============================================================ */

/* ── Live raise ticker ───────────────────────────────────── */
.raise-ticker {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 28px;
    height: 34px;
    background: var(--text);
    color: var(--bg-card);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}
.raise-ticker .lead {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--gold-bright);
    font-weight: 500;
    flex-shrink: 0;
}
.raise-ticker .lead strong { color: var(--bg-card); font-weight: 500; }
.raise-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    animation: portalPulse 2s ease infinite;
}
@keyframes portalPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }
.raise-ticker .stream {
    display: flex; gap: 26px; opacity: 0.62;
    flex: 1; overflow: hidden;
}
.raise-ticker .stream span { flex-shrink: 0; }
.raise-ticker .stream em { color: var(--gold-bright); font-style: normal; }

/* ── Shared top nav ──────────────────────────────────────── */
.portal-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 0 28px;
    height: 64px;
    background: rgba(239,231,215,0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
}
.portal-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.portal-brand-mark {
    width: 30px; height: 30px;
    background: var(--gold);
    color: var(--bg-card);
    font-size: 14px;
    font-weight: 900;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    display: flex; align-items: center; justify-content: center;
}
.portal-brand-name {
    font-family: var(--serif);
    font-style: italic;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1;
}
.portal-brand-name span { color: var(--gold); }
.portal-brand-sub {
    font-family: var(--mono);
    font-size: 8px;
    color: var(--text-mute);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-top: 2px;
}
.portal-nav-links { display: flex; gap: 22px; margin-left: 8px; }
.portal-nav-link {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: color 0.15s;
    cursor: pointer;
    white-space: nowrap;
}
.portal-nav-link:hover { color: var(--gold); }
.portal-nav-link.active { color: var(--text); }
.portal-nav-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* Role chip in nav (for dashboards) */
.role-chip {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text);
    border: 1px solid var(--border-hi);
    padding: 6px 12px;
    background: var(--bg-card);
    cursor: pointer;
    transition: all 0.15s;
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.role-chip:hover { border-color: var(--gold-border); }
.role-chip .dot { width: 7px; height: 7px; border-radius: 50%; }
.role-chip .swap { color: var(--text-mute); font-size: 9px; }

/* ── Shared footer ───────────────────────────────────────── */
.portal-foot {
    border-top: 1px solid var(--border);
    padding: 30px 28px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background: var(--bg-panel);
}
.portal-foot-left { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.portal-foot-engine {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-mute);
    display: inline-flex; align-items: center; gap: 8px;
}
.portal-foot-engine strong { color: var(--gold); font-weight: 500; }
.portal-foot-links { display: flex; gap: 20px; }
.portal-foot-link {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text-mute);
    cursor: pointer;
    transition: color 0.15s;
}
.portal-foot-link:hover { color: var(--text); }

/* ── Door accent tokens ──────────────────────────────────── */
.acc-filmmaker { --acc: var(--gold);    --acc-dim: var(--gold-dim);    --acc-border: var(--gold-border); }
.acc-actor     { --acc: var(--olive);   --acc-dim: var(--olive-dim);   --acc-border: rgba(111,112,64,0.3); }
.acc-investor  { --acc: var(--mauve);   --acc-dim: var(--mauve-dim);   --acc-border: rgba(154,94,114,0.3); }
.acc-supporter { --acc: var(--mustard); --acc-dim: var(--mustard-dim); --acc-border: rgba(196,155,40,0.3); }

/* ── Slate poster vignettes (shared) ─────────────────────── */
.slate-pa { position: absolute; inset: 0; }
.pa-ember   { background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255,210,160,0.28) 0%, transparent 65%), linear-gradient(170deg, #5a3220 0%, #1d1610 60%, #0d0805 100%); }
.pa-olive   { background: radial-gradient(ellipse 50% 50% at 30% 30%, rgba(190,210,180,0.22) 0%, transparent 60%), linear-gradient(180deg, #2a3424 0%, #14180e 60%, #0a0c08 100%); }
.pa-mauve   { background: radial-gradient(ellipse 60% 50% at 60% 30%, rgba(220,170,180,0.28) 0%, transparent 60%), linear-gradient(180deg, #4a2230 0%, #1c1014 60%, #0a0506 100%); }
.pa-mustard { background: radial-gradient(ellipse 50% 60% at 50% 80%, rgba(255,200,120,0.22) 0%, transparent 60%), linear-gradient(180deg, #2c2410 0%, #14110a 60%, #0a0805 100%); }
.pa-steel   { background: radial-gradient(ellipse 60% 50% at 70% 60%, rgba(180,200,230,0.18) 0%, transparent 60%), linear-gradient(180deg, #1a2434 0%, #0e131c 60%, #050810 100%); }
.pa-rust    { background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(230,180,140,0.24) 0%, transparent 60%), linear-gradient(170deg, #3a2a18 0%, #1a1208 60%, #0c0804 100%); }
.pa-grain {
    position: absolute; inset: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 2px),
        repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 2px);
    mix-blend-mode: overlay; pointer-events: none;
}

/* status mono-tags reuse main.css .mono-tag-* */
.status-seeking  { background: var(--gold);    color: var(--bg-card); }
.status-funded   { background: var(--text);    color: var(--bg-card); }
.status-dev      { background: var(--olive);   color: var(--bg-card); }
.status-casting  { background: var(--mustard); color: var(--text); }
.status-reading  { background: var(--mauve);   color: var(--bg-card); }

@media (max-width: 900px) {
    .portal-nav-links { display: none; }
    .raise-ticker .stream { display: none; }
}

/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
[data-lang-mount] { position: relative; display: inline-flex; }
.lang-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.8px;
    color: var(--text-dim); background: var(--bg-card); border: 1px solid var(--border-hi);
    padding: 7px 11px; cursor: pointer; transition: all 0.15s;
    border-radius: var(--radius);
    outline: none;
}
.lang-btn * { pointer-events: none; }
.lang-btn:hover { border-color: var(--gold-border); color: var(--text); }
.lang-globe { opacity: 0.7; flex-shrink: 0; }
.lang-cur { font-weight: 500; }
.lang-caret { font-size: 8px; opacity: 0.6; }
.lang-menu {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 300;
    background: var(--bg-card); border: 1px solid var(--border-hi);
    min-width: 180px; padding: 5px; box-shadow: 0 18px 44px rgba(29,22,16,0.22);
    border-radius: var(--radius);
}
[data-lang-mount].open .lang-menu { display: block; }
.lang-opt {
    display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left;
    background: transparent; border: none; cursor: pointer; padding: 8px 10px;
    color: var(--text-dim); transition: all 0.12s;
    outline: none;
}
.lang-opt * { pointer-events: none; }
.lang-opt:hover { background: var(--bg-hover); color: var(--text); }
.lang-opt.on { color: var(--gold); }
.lang-opt-native { font-size: 13px; font-weight: 600; }
.lang-opt-name { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); margin-left: auto; }

/* RTL */
html.rtl .lang-menu { right: auto; left: 0; }
html.rtl .section-eyebrow::before, html.rtl .cat-eyebrow::before, html.rtl .home-eyebrow,
html.rtl .doors-head .lbl::before { } /* decorative; flow handles itself */
html.rtl body { text-align: right; }
html.rtl .raise-ticker, html.rtl .portal-nav, html.rtl .portal-foot { direction: rtl; }

/* ============================================================
   LIVE SLATE — poster cards (Catalog / Home / Supporter)
   Driven by slate-render.js + projects.js
   ============================================================ */

/* poster media block */
.ev-poster-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 1; }
.ev-poster-vig { position: absolute; inset: 0; z-index: 0; }
.ev-poster-vig.show { z-index: 2; }
.ev-poster-fallback .ev-poster-vig { z-index: 2; }

.ev-pa { position: absolute; inset: 0; }
.ev-pa-ember   { background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(255,210,160,0.28) 0%, transparent 65%), linear-gradient(170deg, #5a3220 0%, #1d1610 60%, #0d0805 100%); }
.ev-pa-olive   { background: radial-gradient(ellipse 50% 50% at 30% 30%, rgba(190,210,180,0.22) 0%, transparent 60%), linear-gradient(180deg, #2a3424 0%, #14180e 60%, #0a0c08 100%); }
.ev-pa-mauve   { background: radial-gradient(ellipse 60% 50% at 60% 30%, rgba(220,170,180,0.28) 0%, transparent 60%), linear-gradient(180deg, #4a2230 0%, #1c1014 60%, #0a0506 100%); }
.ev-pa-mustard { background: radial-gradient(ellipse 50% 60% at 50% 80%, rgba(255,200,120,0.22) 0%, transparent 60%), linear-gradient(180deg, #2c2410 0%, #14110a 60%, #0a0805 100%); }
.ev-pa-steel   { background: radial-gradient(ellipse 60% 50% at 70% 60%, rgba(180,200,230,0.18) 0%, transparent 60%), linear-gradient(180deg, #1a2434 0%, #0e131c 60%, #050810 100%); }
.ev-pa-rust    { background: radial-gradient(ellipse 70% 50% at 50% 40%, rgba(230,180,140,0.24) 0%, transparent 60%), linear-gradient(170deg, #3a2a18 0%, #1a1208 60%, #0c0804 100%); }
.ev-pa-grain { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 2px); mix-blend-mode: overlay; }
.ev-pa-typeset {
    position: absolute; bottom: 22px; left: 16px; right: 16px;
    font-family: var(--serif); font-style: italic; font-weight: 700;
    color: rgba(255,236,206,0.94); line-height: 0.98; letter-spacing: -0.5px; font-size: 26px;
}
.ev-pa-typeset small { display: block; font-family: var(--mono); font-style: normal; font-weight: 500; font-size: 8px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,236,206,0.45); margin-top: 6px; line-height: 1.5; }
.ev-pa-stamp { position: absolute; top: 12px; left: 12px; z-index: 3; font-family: var(--mono); font-size: 8px; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255,236,206,0.62); background: rgba(15,10,6,0.42); padding: 3px 7px; backdrop-filter: blur(4px); }
.ev-pa-status { position: absolute; top: 11px; right: 11px; z-index: 3; }

/* ── Catalog card ── */
.cat-card {
    --acc: var(--gold);
    background: var(--bg-card); text-decoration: none; color: inherit;
    display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
    transition: transform 0.22s, box-shadow 0.22s;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
}
.cat-card.acc-ember   { --acc: var(--gold); }
.cat-card.acc-olive   { --acc: var(--olive); }
.cat-card.acc-mauve   { --acc: var(--mauve); }
.cat-card.acc-mustard { --acc: var(--mustard); }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(29,22,16,0.17); }
.cat-poster { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--text); border-bottom: 3px solid var(--acc); }
.cat-body { padding: 13px 15px 16px; display: flex; flex-direction: column; gap: 6px; }
.cat-title { font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: -0.3px; line-height: 1.15; }
.cat-meta { display: flex; gap: 9px; font-family: var(--mono); font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-mute); flex-wrap: wrap; }
.cat-meta span::after { content: '·'; margin-left: 9px; color: var(--border-hi); }
.cat-meta span:last-child::after { content: ''; margin: 0; }
.cat-logline { font-family: var(--serif); font-style: italic; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); font-weight: 300; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cat-logline-muted { color: var(--text-mute); }

/* ── Compact slate card (scroller / grid) ── */
.slate-card {
    --acc: var(--gold);
    background: var(--bg-card); text-decoration: none; color: inherit;
    display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
    transition: transform 0.22s, box-shadow 0.22s;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
.slate-card.acc-ember { --acc: var(--gold); } .slate-card.acc-olive { --acc: var(--olive); }
.slate-card.acc-mauve { --acc: var(--mauve); } .slate-card.acc-mustard { --acc: var(--mustard); }
.slate-card:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(29,22,16,0.15); }
.slate-poster { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--text); border-bottom: 3px solid var(--acc); }
.slate-card-body { padding: 11px 13px 14px; display: flex; flex-direction: column; gap: 3px; }
.slate-card-title { font-size: 13.5px; font-weight: 700; color: var(--text); letter-spacing: -0.2px; line-height: 1.15; }
.slate-card-meta { font-family: var(--mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-mute); }