/* =====================
    Detail Page Shell

    Shared by every "detail" page (a page reached by clicking into an
    index/list page) that lays out a scrollable content column next to a
    slide-in drawer — currently Chaos Gate detail pages, Lost Ground detail
    pages, Epitaph translation detail pages, and Net Slum detail pages.
   ===================== */

.hero {
    display: flex;
    flex-direction: column;
}

/* The second column starts at 0px so opening the drawer animates the content
   column narrowing via the grid-template-columns transition, rather than the
   drawer appearing on top of the content (same trick as .timeline-layout). */
.page-slot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 0px;
    row-gap: 22px;
    column-gap: 48px;
    align-items: start;
    align-content: start;
    position: relative;
    transition: grid-template-columns 0.3s ease;
}

/* Added to .page-slot by each detail page's openDrawer function. */
.page-slot.drawer-open {
    grid-template-columns: minmax(0, 1fr) min(460px, 40%);
}

.page-slot > .back-link {
    grid-column: 1 / -1;
}

.detail-layout {
    display: flex;
    flex-direction: column;
    gap: 48px;
    max-width: 860px;
    container-type: inline-size;
}

.detail-section {
    padding-bottom: 0;
}

.section-divider {
    width: min(368px, 100%);
    height: 0;
    margin: 0;
    border: none;
    border-top: 1px solid var(--border-color);
}

.detail-heading {
    margin-bottom: 18px;
}

/* Shared "release/artifact hero title" idiom; each consuming page keeps only
   its own margin as a local override. */
.release-title,
.artifact-title {
    font-family: "Newsreader", serif;
    font-size: clamp(2.1rem, 2.6vw, 2.6rem);
    font-weight: 500;
    line-height: 1.05;
}

.release-title {
    margin-bottom: 14px;
}

.release-blurb {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-muted);
}

.related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.related-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--panel);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.related-link:hover {
    border-color: var(--hover-border);
    color: var(--accent);
}

.related-link i {
    width: 15px;
    height: 15px;
    stroke-width: 1.8;
    color: var(--text-faint);
    transition: color .2s ease;
}

.related-link:hover i {
    color: var(--accent);
}

/* =====================
    Detail Content

    Shared paragraph styling for a detail page's main content sections; the
    margin-bottom is the one property pages tend to override (see
    style-chaos-gate-detail.css).
   ===================== */

.detail-content p {
    color: var(--text-subtle);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 16px;
}

.detail-content > p:last-child {
    margin-bottom: 0;
}

.detail-subtopic {
    margin-top: 28px;
}

.detail-content > .detail-subtopic:first-child {
    margin-top: 0;
}

.detail-subtopic-title {
    margin: 0 0 12px 0;
    font-family: "Newsreader", serif;
    font-size: 1.15rem;
    font-weight: 500;
}

.detail-list {
    margin: 0 0 16px 0;
    padding-left: 20px;
    color: var(--text-subtle);
    font-size: 0.95rem;
    line-height: 1.8;
}