/*
 * One person's page (/npcs/<slug>): the list page's card, alone and wide,
 * with the sessions they appear in under it.
 *
 * Loads after npcs.css, whose card it reuses, and consumes the court
 * tokens; it defines no colours of its own. Recorded in BRANDING.md under
 * The Crimson Court.
 */

.npc-page-main {
    max-width: 1060px;
    margin: 0 auto;
    padding: 24px 16px 60px;
}

.npc-page-main .article-breadcrumb { margin-bottom: 18px; }

/* The card, without the list's alternation and appear animation. */
.npc-card--page {
    grid-template-columns: 300px 1fr;
    animation: none;
    opacity: 1;
}

.npc-card--page[hidden] { display: none; }

.npc-card--page .npc-name { font-size: 30px; }

/* Actions under the tags: share, and the way back to everyone. */
.npc-card--page .npc-share {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.npc-all-link {
    font: 600 11px 'Cinzel', Georgia, serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--court-secondary);
    transition: color .18s ease;
}

.npc-all-link:hover,
.npc-all-link:focus-visible { color: var(--royal-gold-light); }

/* In the chronicle: every session the person is tagged in. */
.npc-appearances {
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid var(--court-border);
}

.npc-appearances[hidden] { display: none; }

.npc-appearances.spoiled { display: none; }

.npc-appearances-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin: 0 0 10px;
}

.npc-appearances-head h2 {
    margin: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--royal-gold);
}

.npc-appearances-count {
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: var(--court-secondary);
}

.npc-appearances-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.npc-appearance-row { border-bottom: 1px solid var(--court-line); }

.npc-appearance-link {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 4px 16px;
    padding: 12px 8px;
    text-decoration: none;
    color: var(--parchment);
    transition: background-color .18s ease;
}

.npc-appearance-link:hover,
.npc-appearance-link:focus-visible { background: var(--court-hover); }

.npc-appearance-when {
    padding-top: 3px;
    font: 600 11px 'Cinzel', Georgia, serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--royal-gold);
}

.npc-appearance-title {
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.98rem;
    font-weight: 600;
}

.npc-appearance-teaser {
    grid-column: 2;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--court-secondary);
}

.npc-appearances .spoiler-row { margin-top: 10px; }

.npc-page-main .spoiler-gate { margin-bottom: 24px; }

@media (max-width: 760px) {
    .npc-card--page { grid-template-columns: 1fr; }
    .npc-card--page .npc-portrait { max-width: 280px; margin: 0 auto; }
    .npc-appearance-link { grid-template-columns: minmax(0, 1fr); }
    .npc-appearance-teaser { grid-column: 1; }
}