/*
 * The catch-up page: the story so far, one line per session.
 *
 * Consumes the court tokens in crimson-court.css and the chrome in
 * court-chrome.css (spoiler buttons, locked rows) and defines no colours of
 * its own. Recorded in BRANDING.md under The Crimson Court.
 */

.catchup-main {
    max-width: 880px;
    margin: 0 auto;
    padding: 28px 16px 60px;
}

/* Where the reader stands ------------------------------------------------ */

.catchup-position {
    padding: 22px 24px;
    border: 1px solid var(--court-border);
    border-left: 2px solid var(--crimson-blood);
    background: var(--court-raised);
    margin-bottom: 34px;
}

.catchup-loading,
.catchup-note {
    margin: 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--court-secondary);
}

.catchup-eyebrow {
    margin: 0 0 6px;
    font: 600 11px 'Cinzel', Georgia, serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--royal-gold);
}

.catchup-position h2 {
    margin: 0 0 12px;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--parchment);
}

.catchup-position h2 small {
    display: block;
    margin-top: 4px;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 1.05rem;
    font-weight: 400;
    color: var(--court-secondary);
}

.catchup-position .spoiler-actions { margin-top: 14px; }

.catchup-next {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--court-line);
}

.catchup-next-flag {
    margin: 0 0 6px;
    font: 600 11px 'Cinzel', Georgia, serif;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--crimson-light);
}

.catchup-next-link {
    display: block;
    text-decoration: none;
    color: var(--parchment);
}

.catchup-next-link:hover strong,
.catchup-next-link:focus-visible strong { color: var(--royal-gold-light); }

.catchup-next-meta {
    display: block;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 15px;
    color: var(--court-secondary);
}

.catchup-next-link strong {
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    transition: color .18s ease;
}

/* The lines --------------------------------------------------------------- */

.catchup-act { margin-bottom: 34px; }

.catchup-act-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 8px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--court-border);
}

.catchup-act-head h3 {
    margin: 0;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--royal-gold);
}

.catchup-act-head p {
    margin: 0;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: var(--court-secondary);
}

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

.catchup-line {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--court-line);
}

.catchup-line-link {
    flex: 1 1 auto;
    display: flex;
    gap: 16px;
    padding: 12px 8px;
    text-decoration: none;
    color: var(--parchment);
    transition: background-color .18s ease;
}

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

.catchup-line-num {
    flex: 0 0 52px;
    padding-top: 3px;
    font: 600 11px 'Cinzel', Georgia, serif;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--royal-gold);
}

.catchup-line-body { flex: 1 1 auto; min-width: 0; }

.catchup-line-body strong {
    display: block;
    font-family: 'Cinzel', Georgia, serif;
    font-size: 0.98rem;
    font-weight: 600;
}

.catchup-line-text {
    display: block;
    margin-top: 2px;
    font-family: 'EB Garamond', Georgia, serif;
    font-size: 17px;
    line-height: 1.5;
    color: var(--court-secondary);
}

.catchup-line.is-current .catchup-line-link { border-left: 2px solid var(--crimson-blood); }

.catchup-line-watch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    font-size: 18px;
    color: var(--court-secondary);
    text-decoration: none;
    transition: color .18s ease, background-color .18s ease;
}

.catchup-line-watch:hover,
.catchup-line-watch:focus-visible {
    color: var(--crimson-light);
    background: var(--court-hover);
}

.catchup-acts .spoiler-row { margin-top: 8px; }

/* Where to next ----------------------------------------------------------- */

.catchup-onward {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 26px;
    border-top: 1px solid var(--court-border);
}

.catchup-onward-lede {
    flex: 1 0 100%;
    margin: 0 0 4px;
    font-family: 'EB Garamond', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color: var(--court-secondary);
}

.catchup-onward a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border: 1px solid var(--court-border);
    font: 600 11px 'Cinzel', Georgia, serif;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--royal-gold);
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.catchup-onward a:hover,
.catchup-onward a:focus-visible {
    background: var(--royal-gold);
    color: var(--royal-black);
    border-color: var(--royal-gold);
}

@media (max-width: 600px) {
    .catchup-line-link { gap: 10px; padding: 12px 4px; }
    .catchup-line-num { flex-basis: 44px; }
    .catchup-act-head { flex-direction: column; gap: 2px; }
}