/*
=======================================
SESSION PAGE - ONE EPISODE OF THE COURT
=======================================

The per-session page at /the-story/<number>. It borrows the court palette from
crimson-court.css rather than redefining it, so a token changed there changes
here too.

The video facade reuses the .article-video-* class names on purpose: the
behaviour lives in public/js/article-video.js and keys off those classes. Only
the skin is restated below, because this page does not load articles.css and
the article styling is built for the light purple site rather than the court.
*/

/* ======================
   LAYOUT
   ====================== */
/* .royal-header and .court-index-nav are both position:fixed, so the top of the
   page sits underneath the pair of them. This page has no .heraldic-banner -
   the session title is the banner - so it clears them itself, computed from the
   same tokens the bars are sized with rather than a hardcoded 8rem that drifts
   the moment either bar changes height. */
.session-main {
    max-width: 820px;
    margin: 0 auto;
    padding: calc(var(--court-header-h) + var(--court-index-h) + 2.5rem) 20px 24px;
}

.session-page .skip-link:focus {
    z-index: 100;
}

/* ======================
   HEADER
   ====================== */

/* <header> inside <article> is the right element for a session's title block,
   but styles.css styles the bare `header` tag for the main site's nav bar -
   light background, sticky, drop shadow, backdrop blur. All of that lands on
   this element too and paints a pale slab across the top of the page, so every
   one of those properties is put back explicitly here. */
.session-header {
    text-align: center;
    margin-bottom: 36px;
    background-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    border-bottom: 0;
    position: static;
    padding: 0;
    z-index: auto;
}

.session-eyebrow {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--crimson-light);
    margin: 0 0 14px;
}

.session-number {
    font-family: 'Uncial Antiqua', 'Cinzel', serif;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    color: var(--royal-gold);
    margin: 0 0 6px;
}

.session-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(1.9rem, 5vw, 3rem);
    font-weight: 900;
    line-height: 1.15;
    margin: 0;
    text-wrap: balance;
    background: linear-gradient(135deg, var(--royal-gold), var(--royal-gold-light), var(--royal-gold));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.session-dates {
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 0.98rem;
    color: rgba(244, 233, 201, 0.62);
    margin: 12px 0 0;
}

.session-dates i {
    color: var(--royal-gold);
    margin-right: 5px;
    font-style: normal;
}

/* A gold hairline with a diamond at its centre - the divider the court pages
   use between a banner and its content. */
.session-rule {
    position: relative;
    height: 1px;
    width: min(320px, 70%);
    margin: 28px auto 0;
    background: linear-gradient(90deg, transparent, var(--royal-gold), transparent);
}

.session-rule::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--royal-gold);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.7);
}

/* ======================
   VIDEO
   ====================== */
.session-video {
    margin: 0 0 36px;
}

.article-video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.35);
    background: #000;
}

.article-video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Click-to-play poster. Fills the same 16:9 box the iframe would, so pressing
   play swaps the two with no layout shift. */
.article-video-play {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: #000;
    cursor: pointer;
    display: block;
}

.article-video-poster {
    width: 100%;
    height: 100%;
    /* hqdefault is 4:3 with letterbox bars; cover crops them away. */
    object-fit: cover;
    display: block;
    transition: opacity 0.3s ease, transform 0.6s ease;
}

.article-video-play:hover .article-video-poster {
    opacity: 0.82;
    transform: scale(1.02);
}

.article-video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 52px;
    border-radius: 10px;
    background: rgba(15, 15, 26, 0.82);
    border: 1px solid rgba(212, 175, 55, 0.5);
    transition: background 0.25s ease, border-color 0.25s ease;
}

/* The play triangle, drawn rather than loaded. */
.article-video-play-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent var(--royal-gold-light);
}

.article-video-play:hover .article-video-play-icon,
.article-video-play:focus-visible .article-video-play-icon {
    background: var(--crimson-blood);
    border-color: var(--royal-gold);
}

.article-video-play:focus-visible {
    outline: 3px solid var(--royal-gold);
    outline-offset: 3px;
}

.session-watch-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 12px;
    padding: 11px 18px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--crimson-light);
    border: 1px solid rgba(195, 10, 61, 0.5);
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.session-watch-link:hover,
.session-watch-link:focus-visible {
    background: var(--crimson-blood);
    border-color: var(--crimson-blood);
    color: var(--parchment);
}

.session-watch-link i {
    font-size: 1.05rem;
}

/* ======================
   BODY
   ====================== */
.session-body {
    font-family: 'EB Garamond', serif;
    font-size: 1.12rem;
    line-height: 1.78;
    color: rgba(244, 233, 201, 0.9);
}

.session-body p {
    margin: 0 0 1.15em;
}

/* An opening flourish, matched to the court's display face. :first-of-type
   rather than :first-child so the rule survives an editor's stray wrapper. */
.session-body > p:first-of-type::first-letter {
    font-family: 'Uncial Antiqua', 'Cinzel', serif;
    font-size: 3.2rem;
    line-height: 0.82;
    float: left;
    padding: 6px 12px 0 0;
    color: var(--crimson-light);
}

.session-body a {
    color: var(--royal-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.session-body a:hover {
    color: var(--royal-gold-light);
}

.session-body blockquote {
    margin: 1.5em 0;
    padding: 4px 0 4px 20px;
    border-left: 2px solid var(--crimson-blood);
    font-style: italic;
    color: rgba(244, 233, 201, 0.78);
}

.session-body h2,
.session-body h3 {
    font-family: 'Cinzel', serif;
    color: var(--royal-gold-light);
    margin: 1.6em 0 0.5em;
    line-height: 1.3;
}

.session-body h2 { font-size: 1.45rem; }
.session-body h3 { font-size: 1.2rem; }

.session-body ul,
.session-body ol {
    margin: 0 0 1.15em;
    padding-left: 1.4em;
}

.session-body li {
    margin-bottom: 0.4em;
}

/* ======================
   FIGURE
   ====================== */
.session-figure {
    margin: 36px 0 0;
    padding: 10px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: rgba(20, 19, 30, 0.6);
}

.session-figure img {
    display: block;
    width: 100%;
    height: auto;
}

.session-figure figcaption {
    margin-top: 10px;
    padding: 0 4px;
    font-family: 'EB Garamond', serif;
    font-style: italic;
    font-size: 0.92rem;
    text-align: center;
    color: rgba(244, 233, 201, 0.58);
}

/* ======================
   META - LOCATIONS AND NPCS
   ====================== */
.session-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 28px 44px;
    margin-top: 42px;
    padding-top: 28px;
    border-top: 1px solid rgba(212, 175, 55, 0.18);
}

.session-meta-group {
    flex: 1 1 240px;
}

.session-meta-title {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--royal-gold);
    margin: 0 0 12px;
}

.session-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.session-chip {
    font-family: 'EB Garamond', serif;
    font-size: 0.88rem;
    padding: 4px 12px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    color: rgba(244, 233, 201, 0.72);
}

.session-chip-npc {
    border-color: rgba(195, 10, 61, 0.35);
}

/* ======================
   PREV / NEXT
   ====================== */
.session-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 44px;
}

.session-nav-link {
    display: block;
    padding: 16px 18px;
    border: 1px solid rgba(212, 175, 55, 0.22);
    text-decoration: none;
    transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
}

.session-nav-link:hover {
    border-color: var(--royal-gold);
    background: rgba(212, 175, 55, 0.06);
    transform: translateY(-2px);
}

.session-nav-next {
    text-align: right;
}

.session-nav-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--crimson-light);
    margin-bottom: 5px;
}

.session-nav-title {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: var(--parchment);
    line-height: 1.3;
}

/* The first and last sessions have one neighbour. The placeholder holds the
   grid column so the remaining link stays on its own side. */
.session-nav-link.is-disabled {
    border-style: dashed;
    border-color: rgba(212, 175, 55, 0.1);
    pointer-events: none;
}

.session-nav-link.is-disabled:not(a) {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(244, 233, 201, 0.22);
}

/* ======================
   BACK LINK
   ====================== */
.session-back {
    margin: 32px 0 0;
    text-align: center;
}

.session-back a {
    font-family: 'Cinzel', serif;
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--royal-gold);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
    padding-bottom: 3px;
}

.session-back a:hover {
    color: var(--royal-gold-light);
    border-bottom-color: var(--royal-gold);
}

/* ======================
   RESPONSIVE
   ====================== */
@media (max-width: 640px) {
    .session-main {
        padding: calc(var(--court-header-h) + var(--court-index-h) + 1.75rem) 16px 16px;
    }

    .session-body {
        font-size: 1.05rem;
    }

    .session-meta {
        gap: 24px;
    }

    .session-nav {
        grid-template-columns: 1fr;
    }

    .session-nav-next {
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .session-nav-link,
    .article-video-poster {
        transition: none;
    }

    .article-video-play:hover .article-video-poster {
        transform: none;
    }
}