:root {
    --site-width: 1180px;
    --site-gutter: 28px;
    --site-gap: 14px;
    --site-banner: #c9d8bc;
    --site-ink: #40576e;
}

body > main {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--site-width);
    margin-inline: auto;
    padding: 24px var(--site-gutter) 72px;
}

body.homepage > main {
    width: min(1800px, 100%);
    max-width: 1800px;
    padding: 0 clamp(20px, 4vw, 72px) 70px;
}

body > .masthead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 116px;
    padding: 24px max(var(--site-gutter), calc((100% - var(--site-width)) / 2 + var(--site-gutter)));
    background: #f1ede5;
    border-bottom: 0;
}

.masthead .brand,
.masthead p {
    position: static;
    inset: auto;
}

.masthead .brand strong {
    font: normal clamp(26px, 2.5vw, 40px)/.95 'Libre Caslon Display', Georgia, serif;
    letter-spacing: 0;
    color: var(--site-ink);
}

.masthead .brand strong span { color: #ad719c; }
.masthead .brand-mark { width: 68px; height: 68px; }

body > .site-header {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--site-width);
    padding-inline: var(--site-gutter);
}

body > .event-banner {
    display: flex;
    align-items: center;
    min-height: 74px;
    padding: 14px 0;
    background: var(--site-banner);
    color: var(--site-ink);
}

.event-banner .banner-content {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    width: 100%;
    max-width: var(--site-width);
    padding-inline: var(--site-gutter);
    margin-inline: auto;
}

.event-banner .banner-divider { background: #a8baad; }
.event-banner a.banner-link {
    color: var(--site-ink) !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.event-banner a.banner-link:hover,
.event-banner a.banner-link:focus-visible { border-bottom-color: currentColor; }
.event-banner .banner-or { font-size: 13px; }
.travel-navigation a { color: var(--site-ink); font: 700 14px var(--ui, sans-serif); text-decoration: none; }
.travel-navigation a:hover,
.travel-navigation a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.travel-navigation b { padding: 2px 7px; border-radius: 20px; background: #faf7f2; }

.main-discovery-navigation .trip-planning-links { display: flex; align-items: center; gap: 26px; font: 700 14px var(--ui, sans-serif); }
.main-discovery-navigation .trip-link-group { display: flex; align-items: center; column-gap: 21px; white-space: nowrap; }
.main-discovery-navigation .trip-link-group strong { font-size: 20px; font-weight: 800; }
.main-discovery-navigation .trip-plan-group { margin-left: 8px; padding-left: 24px; border-left: 1px solid #a8baad; }
.main-discovery-navigation a.banner-link[aria-current="page"] { text-decoration: underline; text-decoration-color: #ad719c; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

@media (max-width: 620px) {
    .main-discovery-navigation .trip-planning-links { flex-wrap: wrap; gap: 10px 18px; }
    .main-discovery-navigation .trip-link-group { flex-wrap: wrap; gap: 8px 12px; column-gap: 16px; }
    .main-discovery-navigation .trip-plan-group { margin-left: 0; padding-left: 0; border-left: 0; }
}

body > main .source-discovery { width: 100%; max-width: none; padding-inline: 0; }
body > main .event-grid,
body > main .source-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--site-gap);
}

@media (max-width: 850px) {
    :root { --site-gutter: 20px; --site-gap: 14px; }
    body > main { padding-block: 16px 56px; }
    .event-banner .banner-content { flex-wrap: wrap; gap: 12px 20px; }
    .event-banner .event-group { flex: 1 1 100%; }
    .event-banner .banner-divider,
    .event-banner .mobile-banner-break { display: none; }
}

@media (max-width: 580px) {
    :root { --site-gutter: 14px; --site-gap: 14px; }
    body > main { padding-block: 12px 44px; }
    body > .masthead { min-height: 84px; padding-block: 18px; }
    .masthead .brand-mark { width: 48px; height: 48px; }
    .masthead .brand strong { font-size: 24px; }
    .event-banner .event-group { gap: 12px; }
    body > main .event-grid,
    body > main .source-grid { grid-template-columns: minmax(0, 1fr); }
}

.travel-navigation .banner-content { justify-content: space-between; gap: 28px; }
.travel-navigation .trip-planning-links,
.travel-navigation .travel-navigation-actions { display: flex; align-items: center; gap: 20px; }
.travel-navigation .trip-planning-links { font: 700 14px var(--ui, sans-serif); }
.travel-navigation .trip-planning-links a { font-weight: 700; text-decoration: none; }
.travel-navigation .trip-planning-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 850px) {
    .travel-navigation .banner-content { gap: 12px 20px; }
}
@media (max-width: 620px) {
    .travel-navigation .banner-content { align-items: flex-start; gap: 12px 20px; }
    .travel-navigation .trip-planning-links { flex-wrap: wrap; gap: 8px 14px; }
    .travel-navigation .travel-navigation-actions { gap: 14px; }
}

@media (max-width: 850px) {
    .event-banner.main-discovery-navigation .banner-content { width: 100%; }
    .event-banner.main-discovery-navigation .trip-planning-links { width: 100%; min-width: 0; flex-wrap: wrap; gap: 10px 20px; }
    .event-banner.main-discovery-navigation .trip-link-group { min-width: 0; flex-wrap: wrap; white-space: normal; gap: 8px 16px; }
    .event-banner.main-discovery-navigation .trip-plan-group { margin-left: 0; padding-left: 0; border-left: 0; }
}