/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 12px 20px;
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-full);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--t-fast) var(--ease),
                border-color var(--t-fast) var(--ease),
                color var(--t-fast) var(--ease),
                transform var(--t-fast) var(--ease);
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
    font-weight: 600;
}
.btn-primary:hover {
    background: var(--btn-primary-bg-hover);
    transform: translateY(-1px);
}

.btn-secondary {
    background: transparent;
    color: var(--text);
    border-color: var(--border-strong);
}
.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent-text);
}

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    padding: 8px 0;
}
.btn-ghost:hover { color: var(--accent-text); }

.btn-sm { padding: 8px 14px; font-size: var(--fs-caption); }

/* --- Tag pill (text-only; glyph lives in a separate .card-glyph badge) --- */
.tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    background: transparent;
    white-space: nowrap;
}

/* --- Card type glyph (circular badge before the tag pill) --- */
.card-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-elev-2);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    flex-shrink: 0;
}
.card-glyph svg { width: 13px; height: 13px; display: block; }
.card-glyph-accent {
    color: var(--accent-text);
    border-color: var(--accent);
    background: var(--accent-glow);
}
.tag-accent {
    border-color: var(--accent);
    color: var(--accent-text);
}

/* --- Card --- */
.card {
    display: block;
    background: var(--bg-elev);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--elev-1);
    color: var(--text);
    text-decoration: none;
    transition: box-shadow var(--t-med) var(--ease),
                transform var(--t-med) var(--ease),
                background var(--t-med) var(--ease);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
/* Cursor spotlight: track mouse via --mx/--my CSS vars set in JS */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
                var(--spotlight),
                transparent 45%);
    opacity: 0;
    transition: opacity var(--t-med) var(--ease);
    pointer-events: none;
    z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.card.is-hot::before { opacity: 1; }
a.card[href]:hover, a.card[href]:focus-visible {
    box-shadow: var(--elev-2);
    transform: translateY(-3px);
    text-decoration: none;
}
/* Filter transition: smooth fade for cards being toggled */
.bento [data-cat] { transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.bento [data-cat].is-hidden {
    opacity: 0;
    transform: scale(0.96);
    pointer-events: none;
    /* Use a tiny delay before display:none so the fade is visible */
}
@media (prefers-reduced-motion: reduce) {
    .card::before { display: none; }
    .bento [data-cat] { transition: none; }
}
.card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.card-header .card-glyph + .tag { margin-left: -2px; }
.card-header .card-metric { margin-left: auto; }
.card h3 {
    margin: var(--space-3) 0 var(--space-3);
    color: var(--text);
}
.card p {
    color: var(--text-muted);
    font-size: var(--fs-body);
}
.card-metric {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-faint);
    letter-spacing: 0.05em;
}

/* --- Featured essay (used on /writing) --- */
.featured-essay {
    background: linear-gradient(160deg, var(--bg-elev), var(--bg-elev-2));
    padding: var(--space-7);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-2);
    position: relative;
}
.featured-essay:hover {
    transform: translateY(-3px);
}
.featured-essay h2 {
    color: var(--text);
}
.featured-essay > .tag-accent {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
}
@media (max-width: 600px) {
    .featured-essay { padding: var(--space-5); }
    .featured-essay > .tag-accent { position: static; display: inline-block; margin-bottom: var(--space-3); }
}

/* --- Bento --- */
.bento {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: minmax(180px, auto);
    grid-auto-flow: dense;
    gap: var(--space-4);
}
.bento > * { grid-column: span 2; }
.bento .span-3 { grid-column: span 3; }
.bento .span-4 { grid-column: span 4; }
.bento .span-6 { grid-column: span 6; }
.bento .row-2 { grid-row: span 2; }

@media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .bento > *, .bento .span-3, .bento .span-4, .bento .span-6 { grid-column: span 2; }
    .bento .row-2 { grid-row: auto; }
}

/* --- Stat tile --- */
.stat {
    text-align: left;
}
.stat-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 500;
    color: var(--accent-text);
    line-height: 1;
    margin-bottom: var(--space-2);
}
.stat-label {
    font-size: var(--fs-caption);
    color: var(--text-muted);
}

/* --- Stat bar --- */
.stats-bar {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: var(--space-6) 0;
    margin: var(--space-6) 0;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
}
@media (max-width: 700px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Nav --- */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-med) var(--ease);
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-3) var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.nav-brand {
    font-family: var(--font-display);
    font-size: var(--fs-body-lg);
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.01em;
}
.nav-brand-short { display: none; }
.nav-brand:hover { text-decoration: none; color: var(--text); }
.nav-links {
    display: flex;
    gap: var(--space-5);
    list-style: none;
}
.nav-links a {
    color: var(--text-muted);
    font-size: var(--fs-caption);
    font-weight: 500;
}
.nav-links a:hover, .nav-links a[aria-current="page"] {
    color: var(--text);
    text-decoration: none;
}
.nav-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.icon-btn {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.icon-btn:hover {
    color: var(--accent-text);
    border-color: var(--accent);
}
.nav-mobile-toggle { display: none; }

@media (max-width: 720px) {
    .nav-ready .nav-links { display: none; }
    .nav-mobile-toggle { display: inline-flex; }
    .nav-ready .nav-links.open {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--bg-elev);
        border-top: 1px solid var(--border);
    }
    .nav-links.open li { border-bottom: 1px solid var(--border); }
    .nav-links.open a { display: block; padding: var(--space-4) var(--space-5); }
}

/* --- Footer --- */
.footer {
    border-top: 1px solid var(--border);
    padding: var(--space-7) 0;
    margin-top: var(--space-9);
}
.footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
    color: var(--text-faint);
    font-size: var(--fs-caption);
}
.footer-socials {
    display: flex;
    gap: var(--space-3);
}
.footer-socials a {
    color: var(--text-muted);
    transition: color var(--t-fast) var(--ease);
}
.footer-socials a:hover { color: var(--accent-text); }

/* --- Section header --- */
.section-header {
    margin-bottom: var(--space-6);
    max-width: 720px;
}
.section-header h2 { margin-bottom: var(--space-3); }
.section-header p { color: var(--text-muted); font-size: var(--fs-body-lg); }

/* --- Page header --- */
.page-header {
    padding: var(--space-9) 0 var(--space-7);
    border-bottom: 1px solid var(--border);
}

/* --- Contact strip --- */
.contact-strip {
    background: var(--bg-elev);
    border-radius: var(--radius-lg);
    padding: var(--space-7);
    box-shadow: var(--elev-1);
    text-align: center;
}
.contact-strip h2 { margin-bottom: var(--space-3); }
.contact-strip-links {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-5);
}

/* --- Command palette --- */
.cmdk-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    z-index: 100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}
.cmdk-backdrop.open { display: flex; }
.cmdk-panel {
    background: var(--bg-elev);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-2);
    width: min(560px, 92vw);
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cmdk-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    padding: var(--space-4) var(--space-5);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: var(--fs-body-lg);
    outline: none;
}
.cmdk-list {
    list-style: none;
    overflow-y: auto;
    padding: var(--space-2);
}
.cmdk-item {
    padding: var(--space-3) var(--space-4);
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    border-radius: var(--radius);
    cursor: pointer;
    color: var(--text);
    font-size: var(--fs-body);
}
.cmdk-item[aria-selected="true"] {
    background: var(--bg-elev-2);
    color: var(--accent-text);
}
.cmdk-item-kind {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cmdk-hint {
    display: none;
    padding: var(--space-2) var(--space-5);
    color: var(--text-faint);
    font-size: var(--fs-micro);
    font-family: var(--font-mono);
    border-top: 1px solid var(--border);
}
@media (min-width: 720px) { .cmdk-hint { display: block; } }

/* --- ⌘K hint chip (shown in nav on wide screens) --- */
.cmdk-hint-chip {
    display: none;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-faint);
    background: transparent;
    margin-right: var(--space-1);
    pointer-events: none;
}
.cmdk-hint-chip kbd {
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}
@media (min-width: 900px) {
    .cmdk-hint-chip { display: inline-flex; }
}

/* --- Feature list (used inside cards) --- */
.card-features {
    list-style: none;
    margin-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--fs-caption);
    color: var(--text-muted);
}
.card-features li {
    padding-left: var(--space-4);
    position: relative;
    line-height: 1.45;
}
.card-features li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--accent-text);
    font-weight: 600;
}

/* --- Filter row (used on /work) --- */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.filter-btn {
    padding: 6px 14px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease);
}
.filter-btn:hover { color: var(--text); border-color: var(--border-strong); }
.filter-btn[aria-pressed="true"] {
    color: var(--accent-text);
    border-color: var(--accent);
    background: var(--accent-glow);
}

/* --- Timeline (vertical) --- */
.timeline {
    position: relative;
    padding-left: var(--space-6);
    margin-top: var(--space-5);
}
.timeline::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border);
}
.timeline-item {
    position: relative;
    padding-bottom: var(--space-6);
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 6px;
    width: 9px;
    height: 9px;
    border-radius: var(--radius-full);
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-glow);
}
.timeline-date {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--space-1);
}
.timeline-item h3 { margin-bottom: var(--space-1); }
.timeline-item p { color: var(--text-muted); font-size: var(--fs-caption); }

/* --- Trust signals row --- */
.trust-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: var(--space-5) 0;
}
.trust-row > * { display: inline-flex; align-items: center; gap: var(--space-2); }


/* --- Pillar variants: active + library --- */
.pillars-active .pillar {
    border-color: var(--border-strong);
    border-left: 2px solid var(--accent);
    background: linear-gradient(90deg, var(--accent-glow), transparent 30%), var(--bg-elev);
}
.pillars-library .pillar {
    background: transparent;
    border: 1px dashed var(--border);
    padding: var(--space-4);
}
.pillars-library .pillar h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* --- Mobile-only simplified architecture (used on /work) --- */
.mobile-arch { display: none; }
.mobile-arch-tier {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    padding: var(--space-4);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.mobile-arch-tier strong { color: var(--text); font-family: var(--font-ui); font-size: var(--fs-body); }
.mobile-arch-tier small { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-micro); line-height: 1.6; }
.mobile-arch-tier.accent { border-color: var(--accent); }
.mobile-arch-arrow { text-align: center; color: var(--text-faint); font-size: 18px; margin-bottom: var(--space-3); }
@media (max-width: 720px) {
    figure svg[aria-labelledby="arch-title arch-desc"] { display: none; }
    .mobile-arch { display: block; }
}

/* --- Nav active state: accent underline --- */
.nav-links a[aria-current="page"] {
    color: var(--text);
    position: relative;
}
.nav-links a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--accent);
    border-radius: var(--radius-full);
}

/* --- Contact form inputs (used on /connect) --- */
#contact-form input:focus,
#contact-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Intent cards, forms, static footer and editorial lists. */
.contact-form, .form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.contact-form { gap: var(--space-4); max-width: 540px; }
.form-label, .form-status { font-size: var(--fs-caption); color: var(--text-muted); }
.form-input { width: 100%; min-width: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-3); color: var(--text); font: inherit; }
.form-input::placeholder, .cmdk-input::placeholder { color: var(--text-faint); opacity: 1; }
textarea.form-input { resize: vertical; }
.form-honey { display: none; }
.contact-form > button { align-self: flex-start; }
.form-status { min-height: 1.2em; margin-top: var(--space-3); }
.footer-inner { flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.footer-links a { color: var(--text-muted); font-size: var(--fs-caption); }
.card h3 { text-wrap: balance; }
#work-grid .bento > .card.span-3:last-child:nth-child(odd) { grid-column: 1 / -1; }
.awards-list { list-style: none; margin-top: var(--space-5); }
.awards-list li { display: grid; grid-template-columns: 100px 1fr; gap: var(--space-2) var(--space-4); border-top: 1px solid var(--border); padding: var(--space-4) 0; }
.awards-list p { grid-column: 2; color: var(--text-muted); }
.library-kicker { font: var(--fs-micro) var(--font-mono); color: var(--text-faint); text-transform: uppercase; letter-spacing: .15em; }
html:not(.nav-ready) .nav-tools { display: none; }
@media (max-width: 820px) {
    html:not(.nav-ready) .nav-links { display: flex; position: static; flex-wrap: wrap; width: 100%; }
    html:not(.nav-ready) .nav-inner { flex-wrap: wrap; }
}

.cmdk-search { display: flex; align-items: center; gap: var(--space-2); padding-right: var(--space-3); }
.cmdk-search .cmdk-input { min-width: 0; flex: 1; }
.cmdk-close { min-width: 44px; min-height: 44px; color: var(--text); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.cmdk-empty { padding: var(--space-5); color: var(--text-muted); }
.cmdk-empty[hidden] { display: none; }
@media (max-width: 720px) {
    .icon-btn { width: 44px; height: 44px; flex-shrink: 0; }
    .nav-inner { gap: var(--space-2); flex-wrap: nowrap; }
    .nav-brand { min-width: 0; font-size: 16px; white-space: nowrap; }
    .nav-brand-full { display: none; }
    .nav-brand-short { display: inline; }
    .nav-tools { gap: var(--space-1); margin-left: auto; flex-shrink: 0; }
    .filter-btn, .btn-ghost { min-height: 44px; }
    .footer-links a, .connect-card > a, .connect-card .card-actions a { min-height: 44px; display: inline-flex; align-items: center; }
    .footer-socials { flex-wrap: wrap; }
    .footer-socials a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3); }
}

/* Blueprint annotations stay subordinate to the reading surface. */
.sheet-label, .section-header .sheet-label {
    font: 500 var(--fs-micro)/1.6 var(--font-mono);
    color: var(--annotation);
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
}
.drafting-grid { position: relative; isolation: isolate; padding-block: var(--space-3); }
.drafting-grid::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    mask-image: linear-gradient(90deg, var(--mask-solid) 70%, transparent);
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 24px 24px;
    padding-block: var(--space-3);
}
.title-block {
    display: grid;
    grid-template-columns: 1.2fr 1.2fr 1.5fr auto;
    width: 100%;
    border: 1px solid var(--dim-line);
    font: var(--fs-micro)/1.6 var(--font-mono);
}
.title-block > div { min-width: 0; padding: var(--space-4); }
.title-block > div + div { border-left: 1px solid var(--dim-line); }
.title-block span { display: block; color: var(--annotation); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-2); }
.title-block strong, .title-block time { display: block; color: var(--text-muted); font-weight: 400; overflow-wrap: anywhere; }
.dim { display: block; max-width: 220px; margin-top: var(--space-3); }
.dim-line { display: block; height: 7px; border-inline: 1px solid var(--dim-line); position: relative; }
.dim-line::before { content: ''; position: absolute; top: 3px; left: 0; right: 0; border-top: 1px solid var(--dim-line); }
.dim-note { display: block; color: var(--annotation); font: var(--fs-micro)/1.6 var(--font-mono); margin-top: var(--space-1); }
.blueprint-connector { display: block; width: 100%; height: 12px; margin-bottom: var(--space-3); fill: none; stroke: var(--edge); stroke-width: 1; }
@media (max-width: 720px) {
    .title-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .title-block > div:nth-child(3) { border-left: 0; }
    .title-block > div:nth-child(n+3) { border-top: 1px solid var(--dim-line); }
}
@media (max-width: 390px) {
    .nav-inner { padding-inline: var(--space-3); }
}
.prose .sheet-label { color: var(--annotation); }
.prose > .drafting-grid { margin-top: var(--space-8); }
.prose .drafting-grid h2 { margin-top: 0; }
.prose .drafting-grid + p { margin-top: var(--space-3); }

/* Home systems map: static links, progressive paths, reserved detail space. */
.hero-content.hero-systems { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-6); }
.systems-map { min-width: 0; width: 100%; }
.map-kicker, .map-legend { font: var(--fs-micro)/1.6 var(--font-mono); color: var(--annotation); }
.map-kicker { text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-2); }
.map-legend { margin-top: var(--space-3); }
.map-graph {
    position: relative;
    width: 100%;
    max-width: 560px;
    aspect-ratio: 560 / 470;
    background-image: radial-gradient(var(--grid-line) 1px, transparent 1px);
    background-size: 22px 22px;
}
.map-graph > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-edge { fill: none; stroke: var(--edge); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.map-edge.is-active { stroke: var(--edge-active); stroke-width: 2; }
.map-node {
    position: absolute;
    box-sizing: border-box;
    padding: 10px 12px;
    background: var(--node);
    border: 1px solid var(--edge);
    color: var(--text);
    font: 500 13px/1.4 var(--font-ui);
    text-decoration: none;
    overflow-wrap: normal;
}
.map-node small, .map-trace small { display: block; color: var(--annotation); font: 10px/1.5 var(--font-mono); margin-bottom: var(--space-1); }
/* Percentages share the SVG coordinate system; no sheet transforms. */
.map-node[data-node="profile"] { left: 44.285714%; top: 48.510638%; width: 11.428571%; height: 13.617021%; border-radius: 50%; padding: 3px; }
.map-node[data-node="gsl"] { left: 0.000000%; top: 25.531915%; width: 30.000000%; height: 17.021277%; }
.map-node[data-node="asl"] { left: 66.428571%; top: 25.531915%; width: 30.000000%; height: 17.021277%; }
.map-node[data-node="chatbot"] { left: 66.428571%; top: 0.000000%; width: 30.000000%; height: 17.021277%; }
.map-node[data-node="travel"] { left: 0.000000%; top: 0.000000%; width: 30.000000%; height: 17.021277%; }
.map-node[data-node="mcp"] { left: 70.000000%; top: 78.723404%; width: 30.000000%; height: 17.021277%; }
.map-node[data-node="tools"] { left: 35.000000%; top: 78.723404%; width: 30.000000%; height: 17.021277%; }
.map-node[data-node="weights"] { left: 0.000000%; top: 78.723404%; width: 30.000000%; height: 17.021277%; }
.map-node[data-node="profile"] img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; border-radius: 50%; }
.map-node[data-node="profile"] span { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; font: var(--fs-micro)/1.5 var(--font-mono); }
.map-chip { background: var(--sheet-solid); border-color: var(--sheet-edge); border-radius: 2px; box-shadow: 2px 3px 0 -1px var(--bg), 2px 3px 0 var(--border); --annotation: var(--sheet-faint); }
:root:not([data-theme="dark"]) .map-chip { background: var(--sheet-wash); }
.map-chip:not([data-node="profile"])::before, .map-chip:not([data-node="profile"])::after { content: ''; position: absolute; width: 5px; height: 5px; pointer-events: none; }
.map-chip:not([data-node="profile"])::before { top: 3px; left: 3px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.map-chip:not([data-node="profile"])::after { bottom: 3px; right: 3px; border-bottom: 1px solid var(--accent); border-right: 1px solid var(--accent); }
.map-node.is-active, .map-node:hover { border-color: var(--edge-active); color: var(--text); box-shadow: 0 0 24px var(--map-glow); }
.map-node:focus-visible, .map-trace a:focus-visible, .map-detail a:focus-visible { outline: 2px solid var(--edge-active); outline-offset: 4px; }
.map-descriptions { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.map-detail { border-left: 2px solid var(--edge-active); padding-left: var(--space-4); min-height: 5.5em; font-size: var(--fs-caption); }
.map-detail-copy { color: var(--text-muted); margin: 0; }
.map-detail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); overflow-wrap: anywhere; }
.map-trace { display: none; }
@media (max-width: 1099px) {
    .hero-content.hero-systems { grid-template-columns: minmax(0, 1fr); }
    .systems-map { max-width: 680px; }
}
@media (max-width: 719px) {
    .map-graph { display: none; }
    .map-trace { display: block; list-style: none; padding: 0 0 0 var(--space-4); margin: var(--space-4) 0; border-left: 1px solid var(--edge); }
    .map-trace li { position: relative; margin-bottom: var(--space-2); }
    .map-trace li::before { content: ''; position: absolute; top: 25px; left: calc(-1 * var(--space-4)); width: var(--space-4); border-top: 1px solid var(--edge); }
    .map-trace a { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3); color: var(--text); background: var(--node); border: 1px solid var(--dim-line); text-decoration: none; overflow-wrap: anywhere; font-size: var(--fs-caption); }
    .map-trace a > span { min-width: 0; }
    .map-trace a.is-active, .map-trace a:hover { border-color: var(--edge-active); }
    .map-trace img { width: 44px; height: 44px; flex-shrink: 0; object-fit: cover; object-position: 50% 25%; border-radius: 50%; }
    .map-detail { min-height: 0; }
}

/* Surface language. Clip the drafting background, never text or focus rings. */
.sheet {
    position: relative;
    isolation: isolate;
    min-width: 0;
    --sheet-angle: 0deg;
}
.sheet.sheet--vellum {
    background: var(--sheet-solid);
    border: 1px solid var(--sheet-edge);
    border-radius: 2px;
    overflow: visible;
    box-shadow: 3px 5px 0 -1px var(--bg), 3px 5px 0 0 var(--border), 0 16px 30px -20px var(--sheet-shadow);
    color: var(--text);
    --annotation: var(--sheet-faint);
    --text-faint: var(--sheet-faint);
}
/* Paper remains near opaque; the drafting ground shows at the sheet edge. */
:root:not([data-theme="dark"]) .sheet--vellum { background: var(--sheet-wash); }
.sheet.reg-marks::before, .sheet.reg-marks::after {
    content: '';
    display: block;
    position: absolute;
    width: 9px;
    height: 9px;
    inset: auto;
    border-radius: 0;
    background: none;
    opacity: .8;
    pointer-events: none;
    z-index: 2;
}
.sheet.reg-marks::before { top: 7px; left: 7px; border-top: 1px solid var(--accent); border-left: 1px solid var(--accent); }
.sheet.reg-marks::after { right: 7px; bottom: 7px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
[data-theme="dark"] .sheet--vellum { box-shadow: inset 0 1px 0 var(--sheet-inner), 0 16px 30px -20px var(--sheet-shadow); }
/* At most three essay sheets plus navigation blur. Other cards stay opaque. */
@supports ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
    [data-theme="dark"] .card-dual.sheet--vellum:nth-child(-n+3),
    [data-theme="dark"] .nav {
        background: var(--sheet-wash);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    [data-theme="dark"] .cmdk-backdrop {
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}
.sheet.sheet--drafting {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 36px 30px 30px;
}
.sheet.sheet--drafting::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 1;
    pointer-events: none;
    background: var(--sheet-solid);
    clip-path: polygon(0 18px,18px 18px,18px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
.flagship-spine { position: relative; padding-left: 28px; row-gap: 64px; margin-top: 48px; }
.flagship-spine::before { content: ''; position: absolute; left: 0; top: 0; bottom: 20px; width: 1px; background: var(--dim-line); }
.flagship-spine > .sheet::after { content: ''; position: absolute; left: -28px; top: 60px; width: 44px; height: 1px; background: var(--accent); }
.flagship-spine > .sheet:nth-child(even) { margin-left: 40px; }
.flagship-spine > .sheet:nth-child(even)::after { left: -68px; width: 84px; }
.flagship-spine .flagship-metric { align-content: start; margin-top: -60px; }
.flagship-spine .breakout-num { font-size: clamp(40px, 4.8vw, 72px); font-weight: 430; letter-spacing: -.045em; line-height: 1.15; }
.stats-bar { border: 0; background: none; }
.stats-bar .stat { padding-block: 0; border: 0; background: none; box-shadow: none; }
.stats-bar .stat-value { color: var(--accent-text); font-family: var(--font-display); font-weight: 430; }
@media (max-width: 720px) {
    .flagship-spine { padding-left: 12px; row-gap: 52px; }
    .flagship-spine > .sheet:nth-child(even) { margin-left: 0; }
    .flagship-spine > .sheet::after, .flagship-spine > .sheet:nth-child(even)::after { left: -12px; width: 24px; }
    .sheet.sheet--drafting { padding: 32px 18px 24px; }
    .flagship-spine .flagship-metric { margin-top: -54px; }
    .flagship-spine .breakout-num { font-size: clamp(32px, 8vw, 48px); }
}

/* Video plates: a navy media frame registered onto the surrounding sheet. */
.plate { min-width: 0; margin: var(--space-6) 0; }
.plate > .sheet-label { margin: 0 0 var(--space-3); line-height: 1.6; }
.plate-media { position: relative; aspect-ratio: 16 / 9; background: var(--plate-bg); outline: 1px solid var(--border-strong); outline-offset: 5px; }
.plate-media::before, .plate-media::after { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; color: var(--accent-text); z-index: 1; }
.plate-media::before { top: -6px; left: -6px; border-top: 2px solid; border-left: 2px solid; }
.plate-media::after { right: -6px; bottom: -6px; border-right: 2px solid; border-bottom: 2px solid; }
.plate-play { position: relative; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: var(--plate-bg); color: var(--plate-ink); font: inherit; }
.plate-play:not([hidden]) { display: block; }
.plate-media img, .plate-media video { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: contain; }
.plate-play::after { content: '▶ Play'; position: absolute; bottom: 12px; left: 12px; padding: 8px 14px; background: var(--plate-bg); color: var(--plate-ink); border: 1px solid var(--plate-ink); font-family: var(--font-mono); font-size: var(--fs-caption); }
.plate-play:focus-visible { outline: 3px solid var(--accent-text); outline-offset: 8px; }
.plate-media noscript a { display: block; height: 100%; }
.plate > figcaption { margin-top: var(--space-3); color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.6; }
.flagship-work .plate { grid-column: 1 / -1; width: 100%; margin: 0; }
.card > .plate { align-self: end; }

/* Final review: compact portfolio media and consistent sheet furniture. */
.card .sheet-label, .plate > .sheet-label { font-size: var(--fs-micro); color: var(--annotation); }
.plate--compact:not(.is-expanded) .plate-media { aspect-ratio: auto; background: none; outline: none; }
.plate--compact:not(.is-expanded) .plate-media::before, .plate--compact:not(.is-expanded) .plate-media::after { display: none; }
.plate--compact:not(.is-expanded) .plate-play:not([hidden]), .plate--compact .plate-media noscript a { display: inline-flex; width: auto; max-width: 100%; height: auto; justify-content: flex-start; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-elev); color: var(--accent-text); text-align: left; text-decoration: none; }
.plate--compact:not(.is-expanded) .plate-media img { display: block; width: 96px; height: 54px; flex: 0 0 96px; object-fit: cover; border-radius: var(--radius-sm); }
.plate--compact:not(.is-expanded) .plate-play::after { display: none; }
.plate-glyph { flex: 0 0 auto; font-size: var(--fs-micro); }
.plate-watch { white-space: nowrap; font: var(--fs-caption)/1.5 var(--font-ui); }
.note { margin-top: var(--space-4); color: var(--text-muted); font-size: var(--fs-caption); }
.trust-row span + span::before { content: '·'; }
.principles-link { display: inline-block; margin-top: var(--space-5); }
.contact-strip { border-radius: 2px; }