/* Shared editorial system for article, place and event detail pages. */

.editorial-detail .hero--detail {
    min-height: clamp(360px, 48vw, 540px);
}

.editorial-detail .hero__content {
    padding-top: clamp(90px, 14vw, 150px);
    padding-bottom: clamp(48px, 8vw, 82px);
}

.editorial-detail .hero h1 {
    max-width: 1000px;
    font-size: clamp(2.8rem, 7vw, 6.4rem);
    line-height: .98;
    text-wrap: balance;
}

.editorial-detail .hero .eyebrow,
.history-intro__copy > .eyebrow,
.history-related .eyebrow,
.gamer-intro .eyebrow,
.gamer-game .eyebrow,
.gamer-card .eyebrow {
    color: #783919;
    font-size: .76rem;
    font-weight: 850;
    letter-spacing: .16em;
    line-height: 1.4;
    text-transform: uppercase;
}

.editorial-detail .hero .eyebrow {
    width: fit-content;
    margin-bottom: 18px;
    border: 1px solid rgba(255, 250, 242, .36);
    border-radius: 999px;
    padding: 7px 12px;
    background: rgba(40, 35, 28, .52);
    color: var(--color-sand-light);
    backdrop-filter: blur(8px);
}

.editorial-detail .detail-layout {
    background:
        radial-gradient(ellipse at 8% 5%, rgba(185, 116, 83, .09), transparent 30%),
        var(--color-paper);
    padding-top: clamp(36px, 6vw, 72px);
    padding-bottom: clamp(54px, 8vw, 96px);
}

.editorial-detail .detail-content {
    width: min(100%, var(--page-max));
    margin-inline: auto;
    gap: clamp(22px, 3vw, 34px);
}

.editorial-detail .reading-panel {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--color-taupe) 42%, transparent);
    border-radius: 3px;
    padding: clamp(26px, 4vw, 48px);
    background: color-mix(in srgb, var(--color-white) 94%, var(--color-paper));
    box-shadow: 0 12px 30px rgba(59, 52, 41, .07);
}

.editorial-detail .reading-panel--tone-sand {
    background:
        radial-gradient(circle at 94% 8%, rgba(185, 116, 83, .13), transparent 29%),
        color-mix(in srgb, var(--color-sand-light) 74%, var(--color-white));
}

.editorial-detail .reading-panel--tone-clay {
    background:
        linear-gradient(135deg, rgba(185, 116, 83, .12), transparent 46%),
        color-mix(in srgb, var(--color-paper) 82%, var(--color-sand));
}

.editorial-detail .reading-panel--tone-mist {
    background:
        linear-gradient(160deg, rgba(150, 128, 104, .12), transparent 48%),
        color-mix(in srgb, var(--color-paper) 92%, var(--color-white));
}

.editorial-detail .reading-panel--tone-dark {
    border-color: color-mix(in srgb, var(--color-coal) 76%, var(--color-terracotta));
    background:
        radial-gradient(circle at 90% 8%, rgba(185, 116, 83, .22), transparent 30%),
        var(--color-coal);
}

.editorial-detail .reading-panel--tone-dark h2,
.editorial-detail .reading-panel--tone-dark .rich-text h2,
.editorial-detail .reading-panel--tone-dark .rich-text h3,
.editorial-detail .reading-panel--tone-dark .rich-text h4,
.editorial-detail .reading-panel--tone-dark .rich-text strong {
    color: var(--color-white);
}

.editorial-detail .reading-panel--tone-dark .rich-text,
.editorial-detail .reading-panel--tone-dark .rich-text p,
.editorial-detail .reading-panel--tone-dark .rich-text li {
    color: color-mix(in srgb, var(--color-white) 84%, var(--color-sand));
}

.editorial-detail .reading-panel--tone-dark .rich-text a {
    color: var(--color-sand-light);
}

.editorial-detail .reading-panel h2 {
    max-width: 760px;
    margin: 0;
    color: var(--color-coal);
    font-size: clamp(1.9rem, 4vw, 3.25rem);
    line-height: 1.04;
    text-wrap: balance;
}

.editorial-detail .reading-panel p,
.editorial-detail .rich-text {
    max-width: none;
    color: color-mix(in srgb, var(--color-coal) 80%, var(--color-warm-brown));
    font-size: clamp(1.06rem, 1.3vw, 1.2rem);
    line-height: 1.78;
}

.editorial-detail .detail-intro {
    border-left: 4px solid var(--color-terracotta);
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: clamp(24px, 4vw, 40px);
    background: color-mix(in srgb, var(--color-white) 84%, var(--color-sand));
    box-shadow: 0 18px 46px rgba(59, 52, 41, .08);
}

.editorial-detail .detail-intro p {
    max-width: none;
    color: var(--color-coal);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 550;
    line-height: 1.58;
}

.editorial-detail .rich-text h2,
.editorial-detail .rich-text h3,
.editorial-detail .rich-text h4 {
    margin-top: clamp(24px, 4vw, 40px);
    line-height: 1.1;
    text-wrap: balance;
}

.editorial-detail .rich-text h2 { font-size: clamp(1.8rem, 3.7vw, 2.8rem); }
.editorial-detail .rich-text h3 { font-size: clamp(1.45rem, 2.8vw, 2rem); }

.editorial-detail .rich-text-media {
    border-color: color-mix(in srgb, var(--color-taupe) 45%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-white) 84%, var(--color-sand));
    box-shadow: 0 16px 38px rgba(59, 52, 41, .14);
}

.editorial-detail .rich-text-media figcaption {
    background: color-mix(in srgb, var(--color-white) 86%, var(--color-sand));
    color: var(--color-soft-ink, #675744);
    font-size: .88rem;
    font-weight: 500;
    line-height: 1.5;
}

/* Keep the two subject hubs recognizable, while sharing the article system's
   typography, caption treatment and restrained surface details. */
.history-intro__copy > h2,
.gamer-intro__copy > h2 {
    max-width: 17ch;
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 1.02;
    text-wrap: balance;
}

.history-milestones,
.gamer-principle {
    border-radius: 3px;
    box-shadow: 0 18px 42px rgba(59, 52, 41, .13);
}

.history-era,
.gamer-bridge article,
.gamer-quest__grid article,
.gamer-card {
    border-radius: 3px;
}

.history-story__article .rich-text-media figcaption,
.gamer-feature__media figcaption,
.gamer-card figcaption {
    line-height: 1.5;
}

.history-cta__inner,
.gamer-quest__inner {
    max-width: var(--page-max);
}

@media (max-width: 700px) {
    .editorial-detail .detail-content { gap: 12px; }
    .editorial-detail .reading-panel { padding: 24px 20px; }
    .editorial-detail .detail-intro { padding: 22px; }
}