/* Event detail is intentionally dark-only: the application background is #0b0e14. */
.event-detail-page {
    --event-detail-gold: var(--event-gold);
    --event-detail-ink: var(--event-ink);
    --event-detail-paper: var(--event-paper);
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 20px 72px;
    color: var(--event-detail-paper);
}

.event-detail-hero {
    position: relative;
    isolation: isolate;
    min-height: 430px;
    overflow: hidden;
    border-radius: 34px 34px 34px 12px;
    background-color: #11182a;
    background-image: linear-gradient(125deg, rgba(7, 11, 22, .88), rgba(12, 22, 42, .66)), var(--event-detail-hero-image, radial-gradient(circle at 72% 22%, #26365a 0, #111a30 32%, #0b0e14 76%));
    background-position: center;
    background-size: cover;
    box-shadow: 0 24px 56px rgba(0, 0, 0, .38);
}

.event-detail-hero--important { box-shadow: 0 26px 64px rgba(185, 139, 57, .16); }
.event-detail-starfield, .event-detail-hero__vignette { position: absolute; inset: 0; width: 100%; height: 100%; }
.event-detail-starfield { z-index: -1; }
.event-detail-hero__vignette { z-index: -1; background: radial-gradient(ellipse at 52% 36%, transparent 0, rgba(4, 7, 15, .05) 38%, rgba(4, 7, 15, .64) 100%); pointer-events: none; }
.event-detail-hero__content { position: relative; max-width: 760px; padding: clamp(48px, 8vw, 92px) clamp(30px, 7vw, 82px); }
.event-detail-badge, .event-detail-chip { display: inline-flex; align-items: center; gap: 7px; }
.event-detail-badge { padding: 6px 13px; border-radius: 999px 999px 999px 6px; background: rgba(230, 189, 108, .16); color: #f3d790; font-size: .82rem; letter-spacing: .08em; }
.event-detail-eyebrow, .event-detail-kicker { margin: 18px 0 8px; color: var(--event-detail-gold); font-size: .84rem; letter-spacing: .12em; }
.event-detail-title, .event-detail-heading { font-family: Cinzel, "Times New Roman", serif; }
.event-detail-title { margin: 0; color: #fff9e9; font-size: clamp(2.1rem, 6vw, 4.55rem); line-height: 1.18; letter-spacing: .025em; text-shadow: 0 3px 22px rgba(0, 0, 0, .45); }
.event-detail-conclusion { max-width: 650px; margin: 24px 0 9px; color: #f3eee4; font-size: clamp(1.02rem, 2.2vw, 1.28rem); line-height: 1.9; }
.event-detail-hero__detail { margin: 0; color: rgba(232, 224, 208, .74); line-height: 1.75; }
.event-detail-countdown { display: inline-flex; margin-top: 26px; padding: 9px 15px; border-radius: 14px 14px 14px 4px; background: rgba(5, 9, 18, .44); color: #fff2ca; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.event-detail-content { max-width: 860px; margin: 0 auto; }
.event-detail-section { margin-top: clamp(58px, 9vw, 96px); }
.event-detail-heading { margin: 0; color: #f6f0e4; font-size: clamp(1.55rem, 4vw, 2.35rem); line-height: 1.35; }
.event-detail-conclusion-card { margin-top: 24px; padding: 26px 29px; border: 1px solid rgba(230, 189, 108, .45); border-radius: 30px 30px 30px 9px; background: rgba(27, 35, 53, .64); box-shadow: 0 18px 38px rgba(0, 0, 0, .24); }
.event-detail-conclusion-card p, .event-detail-section-intro { margin: 0; color: #d9d4ca; font-size: 1.04rem; line-height: 1.95; }
.event-detail-moon-mark { display: inline-block; margin-right: 11px; font-size: 1.6rem; vertical-align: -2px; }
.event-detail-moon-mark[data-moon-state="text-success"] { color: #77d7a3; }
.event-detail-moon-mark[data-moon-state="text-warning"] { color: #e6bd6c; }
.event-detail-moon-mark[data-moon-state="text-danger"] { color: #ef8585; }
.event-detail-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.event-detail-chip { padding: 8px 13px; border-radius: 999px 999px 999px 8px; background: rgba(93, 113, 151, .18); color: #cfd8ec; font-size: .9rem; line-height: 1.25; box-shadow: 0 7px 18px rgba(0, 0, 0, .13); }
.event-detail-tip, .event-detail-range-note, .event-detail-timeline-fallback, .event-detail-quiet-note { margin: 21px 0 0; color: #aaa89f; line-height: 1.85; }
.event-detail-tip { display: flex; gap: 11px; color: #d9c795; }
.event-detail-night-date { margin: 10px 0 24px; color: #a8b7d3; }
.event-detail-range-note { padding-left: 2px; color: #e3bd72; }
.event-detail-timeline { margin: 27px 0 0 12px; padding: 0 0 0 33px; list-style: none; border-left: 2px solid rgba(143, 170, 215, .38); }
.event-detail-timeline__item { position: relative; min-height: 67px; padding: 0 0 22px 5px; }
.event-detail-timeline__item:nth-child(3n) { transform: translateX(2px); }
.event-detail-timeline__item:nth-child(4n) { transform: translateX(-2px); }
.event-detail-timeline__dot { position: absolute; left: -47px; top: -3px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 50% 50% 50% 5px; background: #17223b; font-size: .8rem; box-shadow: 0 0 0 5px var(--event-detail-ink); }
.event-detail-timeline__entry time { color: #95b8ec; font-size: .9rem; font-variant-numeric: tabular-nums; }
.event-detail-timeline__entry p { margin: 4px 0 0; color: #dedbd4; line-height: 1.65; }
.event-detail-timeline__item--peak { margin-left: -8px; padding-left: 13px; }
.event-detail-timeline__item--peak .event-detail-timeline__dot { left: -49px; width: 33px; height: 33px; background: #e1b45e; box-shadow: 0 0 0 5px var(--event-detail-ink), 0 0 25px rgba(230, 189, 108, .55); font-size: 1rem; }
.event-detail-timeline__item--peak time { color: #f0ca78; font-size: 1.04rem; font-weight: 700; }
.event-detail-timeline__item--peak p { color: #fff3d3; font-size: 1.08rem; }
.event-detail-gear { margin-top: 38px; padding: 28px 0 0; box-shadow: 0 -16px 35px -30px rgba(113, 162, 232, .7); }
.event-detail-subheading { margin: 0 0 16px; color: #e9dfcb; font-size: 1.1rem; }
.event-detail-spot-list { margin: 23px 0 0; padding: 0; list-style: none; }
.event-detail-spot-list li + li { margin-top: 8px; }
.event-detail-spot-list a { display: flex; align-items: center; gap: 13px; padding: 13px 6px; border-radius: 18px 18px 18px 5px; color: #e8e4db; text-decoration: none; transition: background .2s ease, transform .2s ease; }
.event-detail-spot-list a:hover { background: rgba(126, 154, 201, .12); color: #fff5d9; transform: translateX(3px); }
.event-detail-spot-list__number { color: var(--event-detail-gold); font-family: Cinzel, serif; }
.event-detail-spot-list__name { flex: 1; min-width: 0; }
.event-detail-spot-list__name small { display: inline-block; margin-left: 7px; color: #9ba4b4; }
.event-detail-spot-list__bortle { color: #bac8df; font-size: .8rem; white-space: nowrap; }
.event-detail-gallery__masonry { column-count: 3; column-gap: 18px; margin-top: 27px; }
.event-detail-gallery__card { break-inside: avoid; margin: 0 0 20px; padding: 8px 8px 13px; border-radius: 28px 28px 28px 8px; background: #e6e0d4; color: #20222a; box-shadow: 0 16px 30px rgba(0, 0, 0, .32); transform: rotate(-1deg); }
.event-detail-gallery__card:nth-child(2n) { transform: rotate(1.2deg); }
.event-detail-gallery__card:nth-child(3n) { transform: rotate(-.45deg); }
.event-detail-gallery__card img { display: block; width: 100%; border-radius: 21px 21px 8px 8px; }
.event-detail-gallery__caption { padding: 12px 8px 0; }
.event-detail-gallery__caption h3 { margin: 0 0 5px; font-size: 1rem; }
.event-detail-gallery__byline, .event-detail-gallery__exif { margin: 0; color: #5e5d60; font-size: .77rem; line-height: 1.55; }
.event-detail-gallery__exif { margin-top: 5px; color: #77716a; }
.event-detail-packing__group + .event-detail-packing__group { margin-top: 28px; }
.event-detail-chips--packing { margin-top: 0; }
.event-detail-article-cta { margin-top: 65px; padding: 35px; border-radius: 31px 31px 31px 9px; background: radial-gradient(circle at top right, rgba(230, 189, 108, .16), transparent 47%), #172039; box-shadow: 0 20px 42px rgba(0, 0, 0, .28); }
.event-detail-article-cta p { margin: 0 0 17px; color: #e2ddcf; }
.event-detail-article-cta a { display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; border-radius: 999px 999px 999px 7px; background: var(--event-detail-gold); color: #25202c; font-weight: 700; text-decoration: none; }
.event-detail-neighbors { display: flex; justify-content: space-between; gap: 20px; margin-top: 54px; }
.event-detail-neighbors__link { max-width: 48%; color: #d8d5ce; text-decoration: none; }
.event-detail-neighbors__link--next { margin-left: auto; text-align: right; }
.event-detail-neighbors__link span, .event-detail-neighbors__link small { display: block; color: #98a8c5; font-size: .78rem; }
.event-detail-neighbors__link strong { display: block; margin: 5px 0; color: #f1dfae; font-size: 1rem; }

@media (max-width: 700px) {
    .event-detail-page { padding: 17px 15px 54px; }
    .event-detail-hero { min-height: 380px; border-radius: 28px 28px 28px 9px; }
    .event-detail-hero__content { padding: 48px 28px; }
    .event-detail-conclusion-card { padding: 22px; }
    .event-detail-gallery__masonry { column-count: 2; column-gap: 12px; }
    .event-detail-gallery__card { margin-bottom: 14px; }
    .event-detail-neighbors { gap: 12px; }
}

@media (max-width: 420px) {
    .event-detail-gallery__masonry { column-count: 1; }
    .event-detail-neighbors__link { max-width: 50%; }
}