@charset "UTF-8";
/**
 * visproto-institution.css — public institutional facade (S4).
 *
 * Archival, restrained presentation: dark neutral surfaces, thin rules, one
 * accent, monospace labels. Reuses the site's existing nav/account classes from
 * visproto-site.css and only adds the institution sections.
 */

.vpi-body {
    --vpi-bg: #08090b;
    --vpi-surface: #0d0f12;
    --vpi-line: #23262b;
    --vpi-line-soft: #1a1d21;
    --vpi-text: #b9bec7;
    --vpi-bright: #eef0f3;
    --vpi-muted: #6f7682;
    --vpi-accent: #c9a84c;
    --vpi-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--vpi-bg);
    color: var(--vpi-text);
}

.vpi-nav .vpi-wordmark {
    font-family: var(--vpi-mono);
    letter-spacing: 0.14em;
    color: var(--vpi-bright);
}

.vpi-main {
    max-width: 1080px;
    margin: 0 auto;
    padding: 3.5rem 1.25rem 4rem;
}

/* ── hero ────────────────────────────────────────────────────────────── */
.vpi-hero { padding: 2rem 0 3rem; border-bottom: 1px solid var(--vpi-line); }
.vpi-kicker {
    margin: 0 0 0.75rem;
    font-family: var(--vpi-mono);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--vpi-muted);
}
.vpi-title {
    margin: 0 0 1rem;
    font-family: var(--vpi-mono);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--vpi-bright);
}
.vpi-kind {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.1rem;
    font-size: 0.95rem;
    color: var(--vpi-text);
}
.vpi-lede {
    max-width: 68ch;
    margin: 0 0 1.4rem;
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--vpi-text);
}
.vpi-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 1.4rem; }
.vpi-btn {
    display: inline-block;
    border: 1px solid var(--vpi-line);
    color: var(--vpi-bright);
    text-decoration: none;
    padding: 0.55rem 0.95rem;
    border-radius: 4px;
    font-family: var(--vpi-mono);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
}
.vpi-btn:hover { border-color: var(--vpi-accent); color: var(--vpi-accent); }
.vpi-btn:focus-visible { outline: 2px solid var(--vpi-accent); outline-offset: 2px; }
.vpi-btn--primary { border-color: var(--vpi-accent); color: var(--vpi-accent); background: rgba(201,168,76,0.07); }
.vpi-context {
    max-width: 68ch;
    margin: 0;
    padding: 0.85rem 1rem;
    border-left: 2px solid var(--vpi-line);
    color: var(--vpi-muted);
    font-size: 0.84rem;
    line-height: 1.75;
}

/* ── sections ────────────────────────────────────────────────────────── */
.vpi-section { padding: 2.6rem 0; border-bottom: 1px solid var(--vpi-line); }
.vpi-section-title {
    margin: 0 0 1.3rem;
    font-family: var(--vpi-mono);
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--vpi-muted);
}

.vpi-domains { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); list-style: none; margin: 0; padding: 0; }
.vpi-domain { border: 1px solid var(--vpi-line-soft); border-radius: 6px; padding: 1rem 1.1rem; background: var(--vpi-surface); }
.vpi-domain-label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.55rem; color: var(--vpi-bright); font-size: 0.98rem; }
.vpi-domain-summary { margin: 0; color: var(--vpi-muted); font-size: 0.86rem; line-height: 1.75; }

.vpi-covenant { max-width: 72ch; }
.vpi-covenant-name { margin: 0 0 0.4rem; font-family: var(--vpi-mono); letter-spacing: 0.1em; color: var(--vpi-bright); }
.vpi-covenant-summary { margin: 0 0 1.1rem; color: var(--vpi-text); line-height: 1.85; }
.vpi-relations { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.vpi-relation {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--vpi-line-soft);
    border-radius: 4px;
    font-size: 0.86rem;
}
.vpi-relation-from, .vpi-relation-to { color: var(--vpi-bright); }
.vpi-relation-type { color: var(--vpi-muted); font-family: var(--vpi-mono); font-size: 0.78rem; }

.vpi-records { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.vpi-record { border: 1px solid var(--vpi-line-soft); border-radius: 6px; padding: 0.9rem 1rem; background: var(--vpi-surface); }
.vpi-record-name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.45rem; color: var(--vpi-bright); font-size: 1rem; }
.vpi-record-summary { margin: 0 0 0.45rem; color: var(--vpi-text); font-size: 0.88rem; line-height: 1.75; }
.vpi-record-source { margin: 0; color: var(--vpi-muted); font-size: 0.76rem; font-family: var(--vpi-mono); }

.vpi-interfaces { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.5rem; }
.vpi-interface { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem; padding: 0.5rem 0; border-bottom: 1px solid var(--vpi-line-soft); }
.vpi-interface a { color: var(--vpi-bright); text-decoration: none; border-bottom: 1px dotted var(--vpi-line); font-family: var(--vpi-mono); font-size: 0.84rem; }
.vpi-interface a:hover { color: var(--vpi-accent); border-color: var(--vpi-accent); }
.vpi-interface a:focus-visible { outline: 2px solid var(--vpi-accent); outline-offset: 2px; }
.vpi-interface-note { color: var(--vpi-muted); font-size: 0.8rem; }
.vpi-approval { margin: 0; color: var(--vpi-muted); font-size: 0.76rem; font-family: var(--vpi-mono); }

/* ── chips ───────────────────────────────────────────────────────────── */
.vpi-chip {
    display: inline-block;
    border: 1px solid var(--vpi-line);
    border-radius: 999px;
    padding: 0 0.5rem;
    font-family: var(--vpi-mono);
    font-size: 0.68rem;
    line-height: 1.7;
    color: var(--vpi-muted);
    white-space: nowrap;
}
.vpi-chip--fictional { color: #9aa4b2; border-color: #333a44; }
.vpi-chip--real { color: #8fd3a5; border-color: rgba(143,211,165,0.35); }
.vpi-chip--proposal { color: var(--vpi-accent); border-color: rgba(201,168,76,0.35); }
.vpi-chip--mixed { color: #c2b8d8; border-color: rgba(194,184,216,0.3); }
.vpi-chip--type { color: var(--vpi-muted); }

.vpi-footer .vis-footer-inner { gap: 1rem; flex-wrap: wrap; }

@media (max-width: 720px) {
    .vpi-main { padding: 2.25rem 1rem 3rem; }
    .vpi-hero { padding-top: 1rem; }
    .vpi-relation, .vpi-interface { display: grid; grid-template-columns: 1fr; gap: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .vpi-body * { transition: none !important; }
}