/* Houston Website Landing Page */
body.houston-site-body {
    min-height: 100vh;
    padding: 0;
}

.houston-site-body a {
    color: inherit;
}

.houston-site-page {
    min-height: 100vh;
    overflow: hidden;
}

/* The header is a single flex row on desktop: logo | menu (takes the slack,
   centred) | hours | CTAs. It used to be a fixed-track grid, which let the
   nowrap menu spill out of its track and paint over the hours block and the
   Member button (see the tier block after the dark theme rules). */
.houston-site-nav {
    --houston-nav-gutter: clamp(16px, 4vw, 64px);
    align-items: center;
    column-gap: 20px;
    display: flex;
    margin: 0;
    z-index: 10;
}

.houston-site-logo,
.houston-site-hours,
.houston-site-nav-actions,
.houston-site-nav > .houston-site-nav-ticket-cta {
    flex: none;
}

.houston-site-logo,
.houston-site-footer-logo {
    display: inline-flex;
    flex-direction: column;
    line-height: 1;
    text-decoration: none;
    width: fit-content;
}

.houston-site-logo-image {
    display: block;
    height: auto;
    max-width: 100%;
    width: 182px;
}

/* Fluid logo sizing keeps the brand mark responsive without changing its visual weight. */
.houston-site-logo-main {
    align-items: center;
    display: inline-flex;
    font-weight: 900;
    line-height: 0.9;
}

.houston-site-logo-o {
    align-items: center;
    border: 4px solid #07142d;
    border-radius: 50%;
    display: inline-flex;
    height: 0.74em;
    justify-content: center;
    margin: 0 1px;
    position: relative;
    width: 0.74em;
}

.houston-site-logo-o::after {
    border-radius: 999px;
    content: "";
    display: block;
    height: 5px;
    transform: rotate(-12deg);
    width: 60%;
}

.houston-site-logo-sub {
    font-weight: 800;
    line-height: 1.05;
    text-align: center;
}

.houston-site-menu {
    align-items: stretch;
    align-self: stretch;
    display: flex;
    flex: 1 1 auto;
    gap: 42px;
    justify-content: center;
}

.houston-site-menu-toggle {
    display: none;
}

/* Keep nav labels on one line as the header gap compresses. */
.houston-site-menu a {
    align-items: center;
    display: inline-flex;
    font-weight: 900;
    padding: 0 8px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.houston-site-menu a::after {
    background: transparent;
    border-radius: 999px;
    bottom: 12px;
    content: "";
    height: 4px;
    left: 8px;
    position: absolute;
    right: 8px;
}

.houston-site-menu-item {
    display: inline-flex;
    height: 100%;
    position: relative;
}

.houston-site-hours {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    text-transform: uppercase;
}

.houston-site-hours strong,
.houston-site-hours span span {
    display: block;
    font-weight: 900;
    line-height: 1.05;
}

.houston-site-hours strong {
    font-size: 0.8rem;
}

.houston-site-hours span span {
    font-size: 1.06rem;
}

.houston-site-nav-ticket-cta {
    font-size: 0.82rem;
    justify-self: end;
    min-height: 40px;
    padding: 9px 16px;
    white-space: nowrap;
}

/* Drawer-only "Member sign-in" row; hidden on the desktop horizontal nav,
   revealed inside the open mobile menu (see mobile nav block at end). */
.houston-site-menu a.houston-site-menu-mobile-extra,
.houston-site-page.is-viewing-tickets .houston-site-nav-ticket-cta {
    display: none;
}

/* Right-aligned nav action group: Member sign-in + Buy Tickets share the
   final grid column so the header stays a clean 4-column layout. */
.houston-site-nav-actions {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    justify-self: end;
}

.houston-site-nav-member-cta {
    background: transparent;
    border: 2px solid currentColor;
    color: #07142d;
    font-size: 0.82rem;
    min-height: 40px;
    padding: 9px 16px;
    white-space: nowrap;
}

.houston-site-nav-member-cta:hover,
.houston-site-nav-member-cta:focus-visible {
    background: rgba(7, 20, 45, 0.08);
}

/* Dark navs (events pages / austin theme) need a light outline + text. */
.houston-events-page .houston-site-nav-member-cta,
.austin-theme .houston-site-nav-member-cta {
    color: #f6f1e7;
}

.houston-events-page .houston-site-nav-member-cta:hover,
.houston-events-page .houston-site-nav-member-cta:focus-visible,
.austin-theme .houston-site-nav-member-cta:hover,
.austin-theme .houston-site-nav-member-cta:focus-visible {
    background: rgba(246, 241, 231, 0.14);
}

.houston-site-hero {
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.58) 26%, rgba(0, 0, 0, 0.05) 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.22) 100%),
        url("/static/images/houston/hero.webp") center 22% / cover no-repeat;
    color: #ffffff;
    display: flex;
    min-height: 368px;
    overflow: hidden;
    padding: 20px 64px 28px;
    position: relative;
}

.houston-site-hero::after {
    bottom: -24px;
    clip-path: polygon(0 30%, 12% 36%, 25% 48%, 38% 58%, 50% 62%, 62% 58%, 75% 48%, 88% 36%, 100% 30%, 100% 100%, 0 100%);
    content: "";
    height: 56px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 1;
}

.houston-site-hero-copy {
    align-self: center;
    max-width: 520px;
    position: relative;
    z-index: 2;
}

/* Fluid hero headline scales between desktop and mobile art direction. */
.houston-site-hero h1 {
    color: #ffffff;
    font-size: clamp(2.85rem, 4.6vw, 3.35rem);
    font-weight: 900;
    line-height: 0.9;
    margin: 0 0 9px;
    max-width: 470px;
    text-align: left;
}

.houston-site-hero p {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.18;
    margin: 0 0 10px;
    max-width: 490px;
}

.houston-site-price-strip {
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 4px;
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    margin: 6px 0 12px;
    max-width: 470px;
    min-height: 72px;
    overflow: hidden;
}

.houston-site-price-strip div {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 16px;
    text-align: center;
}

.houston-site-price-strip div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.86);
}

.houston-site-price-strip span {
    color: #ffffff;
    display: block;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
}

.houston-site-price-strip strong {
    color: #ffffff;
    display: block;
    font-size: 1.72rem;
    font-weight: 900;
    line-height: 1.05;
    text-transform: uppercase;
}

.houston-site-price-strip small {
    color: #ffffff;
    display: block;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
}

.houston-site-free-note {
    align-items: center;
    background: #059669;
    border-radius: 12px;
    color: #ffffff;
    display: inline-flex;
    font-size: 0.9rem;
    font-weight: 700;
    gap: 7px;
    line-height: 1.25;
    margin: 14px 0 0;
    padding: 9px 16px;
}

.houston-site-btn {
    align-items: center;
    border-radius: 5px;
    box-sizing: border-box;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1.15;
    min-height: 44px;
    padding: 11px 24px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.houston-site-btn:hover,
.houston-site-btn:focus-visible {
    transform: translateY(-1px);
}

.houston-site-btn-primary {
    border: 2px solid #f0440b;
    font-weight: 700;
}

/* Expose ticket-band width for descendant container queries without changing the grid intent. */
.houston-ticket-band {
    align-items: stretch;
    container: houston-ticket-band / inline-size;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(190px, 220px) minmax(180px, 216px) minmax(180px, 216px) minmax(420px, 1fr);
    padding: 22px 64px 18px;
    position: relative;
    z-index: 3;
}

.houston-ticket-intro {
    padding-top: 2px;
}

.houston-ticket-intro h2,
.houston-exhibit-panel h2,
.houston-site-footer h2 {
    font-weight: 900;
    line-height: 1;
    margin: 0;
    text-align: left;
    text-transform: uppercase;
}

.houston-ticket-intro h2 {
    font-size: 1.45rem;
    margin-bottom: 16px;
}

.houston-ticket-intro p {
    font-size: 0.92rem;
    line-height: 1.42;
    margin: 0 0 18px;
}

.houston-digital-badge {
    align-items: center;
    display: flex;
    gap: 11px;
    max-width: 205px;
    text-transform: uppercase;
}

.houston-digital-badge span {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    height: 40px;
    justify-content: center;
    position: relative;
    width: 40px;
}

.houston-digital-badge span::before {
    border: 2px solid #ffffff;
    border-radius: 2px;
    content: "";
    height: 23px;
    width: 14px;
}

.houston-digital-badge span::after {
    background: #ffffff;
    border-radius: 50%;
    bottom: 9px;
    content: "";
    height: 3px;
    position: absolute;
    width: 3px;
}

.houston-digital-badge strong {
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.15;
}

.houston-ticket-card {
    align-items: center;
    border: 1px solid #dedede;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    min-height: 218px;
    padding: 24px 18px 16px;
    position: relative;
    text-align: center;
}

.houston-ticket-card h3 {
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.2;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.houston-ticket-card p {
    font-size: 0.88rem;
    line-height: 1.28;
    margin: 0;
    max-width: 160px;
}

/* Fluid ticket price type preserves hierarchy while avoiding fixed viewport jumps. */
.houston-ticket-price {
    font-size: clamp(1.75rem, 2.6vw, 2rem) !important;
    font-weight: 900;
    line-height: 1 !important;
    margin-bottom: 14px !important;
    color: var(--houston-ticket-accent) !important;
}

.houston-ticket-card .houston-site-btn {
    height: 60px;
    margin-top: auto;
    max-width: 178px;
    min-height: 60px;
    padding: 0 18px;
    width: 100%;
}

.houston-ticket-card .houston-site-btn-primary,
.houston-ticket-card .houston-site-btn-primary:visited,
.houston-ticket-card .houston-site-btn-primary:hover,
.houston-ticket-card .houston-site-btn-primary:focus-visible {
    color: #ffffff;
}

.houston-ticket-ribbon {
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 900;
    left: 50%;
    line-height: 1;
    min-width: 118px;
    padding: 7px 13px;
    position: absolute;
    text-align: center;
    text-transform: uppercase;
    top: -7px;
    transform: translateX(-50%);
}

.houston-ticket-ribbon::before,
.houston-ticket-ribbon::after {
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    content: "";
    position: absolute;
    top: 0;
}

.houston-ticket-ribbon::before {
    border-right: 10px solid #008a8d;
    left: -10px;
}

.houston-ticket-ribbon::after {
    border-left: 10px solid #008a8d;
    right: -10px;
}

.houston-ticket-card-featured {
    padding-top: 28px;
}

.houston-ticket-card-featured .houston-site-btn-primary {
    background-color: #1D9E75;
    border-color: #1D9E75;
    color: #ffffff;
}

.houston-ticket-card-featured .houston-site-btn-primary:hover,
.houston-ticket-card-featured .houston-site-btn-primary:focus-visible {
    background-color: #0F6E56;
    border-color: #0F6E56;
}

.houston-exhibit-panel {
    min-width: 0;
}

.houston-exhibit-panel h2 {
    font-size: 1.35rem;
    margin-bottom: 11px;
}

/* Expose exhibit-grid width so card internals can respond to the grid container. */
.houston-exhibit-grid {
    container: houston-exhibit-grid / inline-size;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.houston-exhibit-card {
    border: 1px solid #dedede;
    border-radius: 7px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.houston-exhibit-card img {
    aspect-ratio: 1.18 / 1;
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.houston-exhibit-card h3 {
    align-items: center;
    display: flex;
    flex: 1;
    font-size: 0.82rem;
    font-weight: 900;
    justify-content: center;
    line-height: 1.02;
    margin: 0;
    min-height: 47px;
    padding: 8px 8px 7px;
    text-align: center;
    text-transform: uppercase;
}

/* Let ticket-band children react to available band width, independent of viewport. */
@container houston-ticket-band (max-width: 64rem) {
    .houston-exhibit-panel {
        grid-column: 1 / -1;
    }
}

/* Keep ticket cards comfortable when the band is embedded in a narrower container. */
@container houston-ticket-band (max-width: 48rem) {
    .houston-ticket-intro {
        grid-column: 1 / -1;
    }

    .houston-ticket-card {
        min-height: 210px;
    }
}

/* Tune exhibit card labels from the grid width rather than the viewport. */
@container houston-exhibit-grid (max-width: 36rem) {
    .houston-exhibit-card h3 {
        min-height: 43px;
        padding-left: 6px;
        padding-right: 6px;
    }
}

.houston-visit-band {
    align-items: center;
    border-top: 1px solid #dde2e7;
    display: grid;
    gap: 30px;
    grid-template-columns: minmax(250px, 300px) minmax(260px, 310px) minmax(420px, 1fr);
    padding: 10px 64px 10px;
}

.houston-visit-detail {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: 30px 1fr;
    margin: 9px 0;
}

.houston-visit-detail p {
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0;
}

.houston-icon {
    display: inline-block;
    height: 32px;
    position: relative;
    width: 32px;
}

.houston-icon-pin::before {
    border-radius: 50% 50% 50% 0;
    content: "";
    height: 25px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(-45deg);
    width: 25px;
    background: var(--houston-coral);
}

.houston-icon-pin::after {
    border-radius: 50%;
    content: "";
    height: 8px;
    left: 12px;
    position: absolute;
    top: 9px;
    width: 8px;
}

.houston-icon-email::before,
.houston-icon-email::after {
    content: none;
}

.houston-visit-hours {
    align-items: center;
    border-left: 1px solid #aeb7c1;
    display: grid;
    gap: 21px;
    min-height: 70px;
    padding-left: 39px;
}

.houston-visit-hours dl {
    display: grid;
    gap: 2px;
    margin: 0;
}

.houston-visit-hours div {
    display: grid;
    gap: 28px;
    grid-template-columns: 66px 1fr;
}

.houston-visit-hours dt,
.houston-visit-hours dd {
    font-size: 0.86rem;
    line-height: 1.15;
    margin: 0;
}

.houston-visit-hours dt {
    font-weight: 900;
}

.venue-map {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
    width: 100%;
}

.venue-map-canvas {
    border-radius: 12px;
    height: 320px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.venue-map-frame {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

/* Apple devices: transparent click target that opens Apple Maps. */
.venue-map-overlay {
    cursor: pointer;
    inset: 0;
    position: absolute;
}

.venue-map-directions {
    align-self: center;
}

.houston-site-footer {
    align-items: start;
    border: 0;
    color: #ffffff;
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(220px, 270px) minmax(270px, 1fr) minmax(180px, 230px) minmax(170px, 220px) minmax(150px, 210px);
    margin: 0;
    padding: 26px 64px 28px;
    text-align: left;
}

/* Fluid footer logo keeps the secondary mark proportional across footer widths. */
.houston-site-footer .houston-site-logo-main {
    color: #ffffff;
    font-size: clamp(2rem, 2.6vw, 2.25rem);
}

.houston-site-footer .houston-site-logo-o::after {
    background: #7fdfea;
}

.houston-site-footer .houston-site-logo-sub {
    color: #7fdfea;
}

.houston-site-copyright {
    font-size: 0.8rem;
    line-height: 1.45;
    margin: 16px 0 0;
}

.houston-site-footer h2 {
    font-size: 1rem;
    margin-bottom: 12px;
}

.houston-footer-column {
    display: grid;
    gap: 5px;
}

.houston-footer-column a {
    font-size: 0.82rem;
    line-height: 1.35;
    text-decoration: none;
}

.houston-footer-column a:hover,
.houston-footer-column a:focus-visible {
    text-decoration: underline;
}

.houston-social-links {
    display: flex;
    gap: 18px;
    margin-top: 6px;
}

.houston-social-links a {
    align-items: center;
    color: #ffffff;
    display: inline-flex;
    font-size: 1.55rem;
    font-weight: 900;
    height: 28px;
    justify-content: center;
    line-height: 1;
    text-decoration: none;
    width: 28px;
}

.houston-events-hero {
    background: #ffffff;
    border-top: 1px solid #dde2e7;
    color: #07142d;
    padding: 38px 64px 10px;
}

.houston-events-hero h1 {
    color: #07142d;
    font-size: clamp(2.7rem, 5vw, 4.2rem);
    font-weight: 900;
    line-height: 0.95;
    margin: 0 0 14px;
    text-align: left;
    text-transform: uppercase;
}

.houston-events-hero p {
    color: #07142d;
    font-size: 1.02rem;
    line-height: 1.4;
    margin: 0;
}

.houston-events-trust-strip {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    margin: 4px 64px 42px;
    padding: 18px 28px;
}

.houston-events-trust-strip div {
    display: grid;
    gap: 4px;
}

.houston-events-trust-strip strong,
.houston-events-trust-strip span {
    color: #07142d;
    line-height: 1.25;
}

.houston-events-trust-strip strong {
    font-size: 0.9rem;
    font-weight: 900;
}

.houston-events-trust-strip span {
    font-size: 0.82rem;
}

/* Use em breakpoints so browser text scaling preserves the same responsive step. */
@media (max-width: 73.75em) {
    .houston-ticket-band {
        grid-template-columns: minmax(190px, 0.9fr) minmax(180px, 1fr) minmax(180px, 1fr);
    }

    .houston-exhibit-panel {
        grid-column: 1 / -1;
    }

    .houston-visit-band {
        grid-template-columns: minmax(250px, 1fr) minmax(260px, 1fr);
    }

    .houston-site-footer {
        grid-template-columns: minmax(220px, 1fr) minmax(260px, 1fr) minmax(180px, 1fr);
    }

    .houston-events-hero {
        padding-left: 28px;
        padding-right: 28px;
    }

    .houston-events-trust-strip {
        margin-left: 28px;
        margin-right: 28px;
    }
}

/* Use em breakpoints so browser text scaling preserves the same responsive step. */
@media (max-width: 51.25em) {
    .houston-site-hero {
        background:
            linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.62) 46%, rgba(0, 0, 0, 0.18) 100%),
            url("/static/images/houston/hero.webp") center 18% / cover no-repeat;
        min-height: 490px;
        padding: 42px 22px 58px;
    }

    .houston-site-hero h1 {
        font-size: clamp(2.36rem, 5.4vw, 2.7rem);
        max-width: 390px;
    }

    .houston-site-hero p {
        font-size: 1.08rem;
        max-width: 360px;
    }

    .houston-site-price-strip {
        max-width: 100%;
    }

    .houston-ticket-band,
    .houston-visit-band {
        grid-template-columns: 1fr;
        padding-left: 22px;
        padding-right: 22px;
    }

    .houston-ticket-card {
        min-height: 210px;
    }

    .houston-exhibit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .houston-visit-hours {
        border-left: 0;
        border-top: 1px solid #aeb7c1;
        padding: 18px 0 0;
    }

    .houston-site-footer {
        gap: 24px;
        grid-template-columns: 1fr 1fr;
        padding: 28px 22px;
    }

    .houston-events-hero {
        padding: 34px 22px 10px;
    }

    .houston-events-trust-strip {
        grid-template-columns: 1fr 1fr;
        margin: 4px 22px 34px;
        padding: 18px;
    }
}

/* Use em breakpoints so browser text scaling preserves the same responsive step. */
@media (max-width: 32.5em) {
    .houston-site-menu {
        justify-content: flex-start;
    }

    .houston-site-hero {
        min-height: 520px;
    }

    .houston-site-hero h1 {
        font-size: clamp(2.08rem, 8vw, 2.18rem);
    }

    .houston-site-price-strip, .houston-exhibit-grid, .houston-site-footer, .houston-events-trust-strip {
        grid-template-columns: 1fr;
    }

    .houston-site-price-strip div + div {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.86);
    }

    .houston-visit-hours div {
        gap: 14px;
        grid-template-columns: 68px 1fr;
    }

}

/* Use em breakpoints so browser text scaling preserves the same responsive step. */
@media (max-width: 48em) {
    .houston-site-nav::after, .houston-site-nav.is-menu-open .houston-site-menu a::after {
        content: none;
        display: none;
    }

    .houston-site-menu, .houston-site-menu-toggle span, .houston-site-nav-ticket-cta {
        display: none;
    }

    .houston-site-menu-toggle {
        border: 0;
        border-radius: 0;
        cursor: pointer;
        height: 24px;
        padding: 0;
        width: 34px;
    }

    .houston-site-menu-toggle:focus-visible {
        outline: 3px solid #0098ad;
        outline-offset: 5px;
    }

    .houston-site-nav.is-menu-open .houston-site-menu {
        height: auto;
        justify-content: stretch;
        overflow: visible;
    }

    .houston-site-nav.is-menu-open .houston-site-menu-item {
        display: grid;
        height: auto;
        width: 100%;
    }

    .houston-site-hours {
        gap: 8px;
        grid-column: 2;
        justify-content: end;
        margin: 0;
        order: initial;
        white-space: nowrap;
    }

    .houston-site-hours strong {
        font-size: 0.72rem;
    }

    .houston-site-hours span span {
        font-size: 0.88rem;
    }

    .houston-site-hero {
        background:
            linear-gradient(90deg, rgba(2, 13, 26, 1) 0%, rgba(2, 13, 26, 0.96) 34%, rgba(2, 13, 26, 0.76) 62%, rgba(2, 13, 26, 0.22) 100%),
            linear-gradient(180deg, rgba(2, 13, 26, 0.04) 0%, rgba(2, 13, 26, 0.42) 100%),
            url("/static/images/houston/hero.webp") center 18% / cover no-repeat;
        min-height: 0;
        padding: 100px 22px 72px;
    }

    .houston-site-hero::after {
        bottom: -22px;
        height: 76px;
    }

    .houston-site-hero-copy {
        align-self: start;
        max-width: 100%;
    }

    .houston-site-hero h1 {
        font-size: clamp(2.38rem, 10.75vw, 2.78rem);
        line-height: 1.04;
        margin-bottom: 20px;
        max-width: 340px;
    }

    .houston-site-hero h1 span {
        display: block;
    }

    .houston-site-hero p {
        font-size: 1.22rem;
        line-height: 1.42;
        margin-bottom: 22px;
        max-width: 325px;
    }

    .houston-site-price-strip {
        display: grid;
        grid-template-columns: 1fr;
        margin: 0 0 22px;
        min-height: 0;
    }

    .houston-site-hero-sws-cta {
        width: min(100%, 325px);
    }

    .houston-site-price-strip div {
        display: grid;
        grid-template-columns: 38px 1fr;
        justify-items: start;
        min-height: 0;
        text-align: left;
    }

    .houston-site-price-strip div::before {
        align-self: center;
        border-radius: 50%;
        content: "";
        grid-column: 1;
        grid-row: 1 / span 3;
        justify-self: center;
    }

    .houston-site-price-strip div + div {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.76);
        border-top-color: rgba(255, 255, 255, 0.12);
    }

    .houston-site-price-strip span,
    .houston-site-price-strip strong,
    .houston-site-price-strip small {
        grid-column: 2;
    }

    .houston-site-price-strip span {
        font-size: 0.78rem;
        line-height: 1.1;
    }

    .houston-site-price-strip strong {
        font-size: 1.4rem;
        line-height: 1.04;
    }

    .houston-site-price-strip div:nth-child(2) strong {
        font-size: 1.7rem;
    }

    .houston-site-price-strip small {
        font-size: 0.8rem;
        line-height: 1.14;
    }
}

/* Keep the compact mobile header and checkout cards inside narrow phone viewports. */
@media (max-width: 32.5em) {
    .houston-site-nav {
        gap: 7px;
    }

    .houston-site-menu-toggle {
        height: 22px;
        right: 16px;
        width: 30px;
    }

    .houston-site-hours {
        gap: 6px;
        min-width: 0;
    }

    .houston-site-hours > span {
        min-width: 0;
    }

    .houston-site-hours strong {
        font-size: 0.64rem;
    }

    .houston-site-hours span span {
        font-size: 0.8rem;
    }
}

/* Dark Houston site palette and events redesign. */
body.houston-site-body {
    --houston-bg: #1d1d1a;
    --houston-bg-soft: #242420;
    --houston-card: #2b2c29;
    --houston-line: rgba(255, 255, 255, 0.13);
    --houston-line-strong: rgba(255, 255, 255, 0.23);
    /* Form-control outlines: WCAG 1.4.11 wants 3:1 against the surface. --houston-line* are
       decorative dividers (~1.5-2.1:1) and must not outline an input. */
    --houston-field-border: #7f7d78;
    --houston-text: #f6f1e7;
    --houston-muted: #aaa69d;
    --houston-muted-2: #d8d2c4;
    --houston-teal: #18b991;
    --houston-coral: #d85a30;
    --houston-coral-hover: #c74e27;
    --houston-coral-shadow: rgba(216, 90, 48, 0.3);
    --houston-amber: #ef9f27;
    --houston-amber-text: #412402;
    --houston-member-green: #1d9e75;
    --houston-non-member-gray: #8c8a83;
    --houston-ticket-accent: #46ad55;
    --houston-ticket-accent-border: rgba(70, 173, 85, 0.6);
    --houston-ticket-accent-glow: rgba(70, 173, 85, 0.18);
    --houston-ticket-primary: #f59425;
    --houston-ticket-primary-hover: #e07f12;
    --houston-ticket-primary-shadow: rgba(245, 148, 37, 0.3);
    --houston-max: 1180px;
    background:
        radial-gradient(circle at 12% 4%, rgba(8, 58, 99, 0.28), transparent 31rem),
        radial-gradient(circle at 92% 12%, rgba(24, 185, 145, 0.1), transparent 26rem),
        var(--houston-bg);
    color: var(--houston-text);
}

/* Scrollbars on the public site: a dark track matching the page, a muted
   pill thumb that lights up in the venue accent on hover. Chrome/Safari use
   the ::-webkit-scrollbar pseudo-elements; Chrome 121+ ignores those wherever
   scrollbar-color is set, so the standard property is only applied where the
   pseudo-elements are unsupported (Firefox). The page scrollbar belongs to
   <html>, which cannot see the palette variables declared on <body>, so the
   colours are declared on <html> via :has() and inherited from there. */
html:has(> body.houston-site-body) {
    --site-scrollbar-track: #1d1d1a;
    --site-scrollbar-thumb: #6b6960; /* ~3:1 against the track */
    --site-scrollbar-accent: #18b991;
}

html:has(> body.austin-theme) {
    --site-scrollbar-accent: #46ad55;
}

html:has(> body.sanantonio-theme) {
    --site-scrollbar-accent: #2aa4c4;
}

html:has(> body.houston-site-body)::-webkit-scrollbar,
html:has(> body.houston-site-body) ::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

html:has(> body.houston-site-body)::-webkit-scrollbar-track,
html:has(> body.houston-site-body) ::-webkit-scrollbar-track,
html:has(> body.houston-site-body)::-webkit-scrollbar-corner,
html:has(> body.houston-site-body) ::-webkit-scrollbar-corner {
    background: var(--site-scrollbar-track);
}

html:has(> body.houston-site-body)::-webkit-scrollbar-thumb,
html:has(> body.houston-site-body) ::-webkit-scrollbar-thumb {
    background: var(--site-scrollbar-thumb);
    border: 3px solid var(--site-scrollbar-track);
    border-radius: 999px;
}

html:has(> body.houston-site-body)::-webkit-scrollbar-thumb:hover,
html:has(> body.houston-site-body) ::-webkit-scrollbar-thumb:hover {
    background: var(--site-scrollbar-accent);
}

@supports not selector(::-webkit-scrollbar) {
    html:has(> body.houston-site-body),
    html:has(> body.houston-site-body) * {
        scrollbar-color: var(--site-scrollbar-thumb) var(--site-scrollbar-track);
    }
}

.houston-site-page {
    background:
        radial-gradient(circle at 12% 4%, rgba(8, 58, 99, 0.28), transparent 31rem),
        radial-gradient(circle at 92% 12%, rgba(24, 185, 145, 0.1), transparent 26rem),
        var(--houston-bg);
}

.houston-site-nav {
    background: rgba(26, 26, 23, 0.92);
    border-bottom: 1px solid var(--houston-line);
    min-height: 78px;
    padding: 16px var(--houston-nav-gutter);
    position: sticky;
    top: 0;
}

@supports (backdrop-filter: blur(16px)) {
    .houston-site-nav {
        backdrop-filter: blur(16px);
        background: rgba(26, 26, 23, 0.86);
    }
}

.houston-site-logo,
.houston-site-footer-logo {
    color: #ffffff;
}

.houston-site-logo-main {
    color: #ffffff;
    font-size: clamp(1.62rem, 2.5vw, 1.82rem);
}

.houston-site-logo-o, .houston-site-footer .houston-site-logo-o {
    border-color: #ffffff;
}

.houston-site-logo-o::after, .houston-site-menu a.is-active::after, .houston-site-menu a:hover::after {
    background: var(--houston-teal);
}

.houston-site-logo-sub {
    color: var(--houston-teal);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}

.houston-site-menu {
    gap: clamp(12px, 1.8vw, 28px);
}

.houston-site-menu a {
    color: #d9d4cb;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    opacity: 0.82;
}

.houston-site-menu a.is-active,
.houston-site-menu a:hover,
.houston-site-menu a:focus-visible {
    opacity: 1;
}

.houston-site-hours {
    color: var(--houston-muted-2);
}

/* Desktop header tiers. Break points are measured from the widest venue and
   locale pair: Austin with Spanish CTAs ("Comprar boletos"). With the Austin
   logo at the gutter, one row fits from ~1220px (76.25em); adding the hours
   block and the full logo offset needs ~1480px, so hours show from 96em
   (1536px). The Austin logo offset is fluid (see the Austin block near the end)
   and only grows once the row has room for it. Below 76.25em the menu drops
   onto its own centred row rather than letting the links run under the
   Member/Buy buttons. Re-measure if a nav label, the logo, or the CTA copy
   grows. */
@media (max-width: 96em) {
    .houston-site-hours {
        display: none;
    }
}

@media (min-width: 48.0625em) and (max-width: 76.25em) {
    .houston-site-nav {
        flex-wrap: wrap;
        padding-bottom: 6px;
        row-gap: 4px;
    }

    .houston-site-logo {
        order: 1;
    }

    .houston-site-nav-actions,
    .houston-site-nav > .houston-site-nav-ticket-cta {
        margin-left: auto;
        order: 2;
    }

    .houston-site-menu {
        flex: 1 0 100%;
        flex-wrap: wrap;
        justify-content: center;
        min-height: 44px;
        order: 3;
    }

    .houston-site-menu a::after {
        bottom: 6px;
    }
}

.houston-site-btn-primary {
    background: var(--houston-coral);
    border-color: var(--houston-coral);
    box-shadow: 0 12px 28px var(--houston-coral-shadow);
    color: #ffffff;
}

.houston-site-btn-primary:hover,
.houston-site-btn-primary:focus-visible {
    background: var(--houston-coral-hover);
    border-color: var(--houston-coral-hover);
    box-shadow: 0 16px 34px rgba(216, 90, 48, 0.38);
}

.houston-site-hero::after {
    background: var(--houston-bg);
}

.houston-site-price-strip div:nth-child(2) strong {
    color: var(--houston-coral);
}

.houston-ticket-band,
.houston-visit-band {
    background: transparent;
}

.houston-ticket-intro h2,
.houston-exhibit-panel h2 {
    color: var(--houston-text);
}

.houston-ticket-intro p,
.houston-ticket-card p,
.houston-visit-detail p,
.houston-visit-hours dt,
.houston-visit-hours dd {
    color: var(--houston-muted-2);
}

.houston-digital-badge {
    color: var(--houston-ticket-accent);
}

.houston-digital-badge span,
.houston-ticket-ribbon {
    background: var(--houston-ticket-accent);
}

.houston-ticket-ribbon::before {
    border-right-color: var(--houston-ticket-accent);
}

.houston-ticket-ribbon::after {
    border-left-color: var(--houston-ticket-accent);
}

.houston-ticket-card,
.houston-exhibit-card {
    background: var(--houston-card);
    border-color: var(--houston-line);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.houston-ticket-card h3,
.houston-exhibit-card h3,
.houston-icon,
.houston-site-footer h2,
.houston-site-copyright,
.houston-footer-column a {
    color: var(--houston-text);
}

.houston-ticket-card-featured {
    border-color: var(--houston-ticket-accent-border);
    box-shadow: 0 0 0 1px var(--houston-ticket-accent-glow), 0 18px 48px rgba(0, 0, 0, 0.24);
}

.houston-site-body .houston-ticket-card .houston-site-btn.houston-site-btn-primary,
.houston-site-body .houston-ticket-card .houston-site-btn.houston-site-btn-primary:visited {
    background: var(--houston-ticket-primary);
    border-color: var(--houston-ticket-primary);
    box-shadow: 0 12px 28px var(--houston-ticket-primary-shadow);
    color: #ffffff;
}

.houston-site-body .houston-ticket-card .houston-site-btn.houston-site-btn-primary:hover,
.houston-site-body .houston-ticket-card .houston-site-btn.houston-site-btn-primary:focus-visible {
    background: var(--houston-ticket-primary-hover);
    border-color: var(--houston-ticket-primary-hover);
    box-shadow: 0 16px 34px rgba(245, 148, 37, 0.38);
}

.houston-visit-band {
    border-top-color: var(--houston-line);
}

.houston-icon-pin::after {
    background: var(--houston-card);
}

.houston-icon-email {
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%20stroke%3D%22%23f6f1e7%22%20stroke-width%3D%222.5%22/%3E%3Cpath%20d%3D%22M4%207l8%206%208-6%22%20stroke%3D%22%23f6f1e7%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22/%3E%3C/svg%3E") center / 32px 32px no-repeat;
}

.houston-visit-hours {
    border-left-color: var(--houston-line-strong);
}

.houston-site-footer {
    background: #171814;
    border-top: 1px solid var(--houston-line);
}

.houston-events-main {
    margin: 0 auto;
    max-width: var(--houston-max);
    padding: 24px 22px 44px;
    min-width: 0;
}

.houston-events-page .houston-events-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 28px),
        linear-gradient(135deg, #073456 0%, #082d4d 47%, #0b2740 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    min-height: 390px;
    overflow: hidden;
    padding: clamp(32px, 6vw, 58px);
    position: relative;
}

.houston-events-page .houston-events-hero::after {
    background: radial-gradient(circle, rgba(24, 185, 145, 0.24), transparent 68%);
    border-radius: 50%;
    bottom: -210px;
    content: "";
    height: 420px;
    pointer-events: none;
    position: absolute;
    right: -130px;
    width: 420px;
}

.houston-events-eyebrow {
    color: #50d0b8 !important;
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.17em;
    margin: 0 0 18px !important;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.houston-events-page .houston-events-hero h1 {
    color: #fffaf0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.875rem, 8vw, 4.75rem);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 0.96;
    margin: 0;
    max-width: 650px;
    text-align: left;
    text-transform: none;
    overflow-wrap: anywhere;
}

.houston-events-page .houston-events-hero p:not(.houston-events-eyebrow) {
    color: rgba(246, 241, 231, 0.68);
    font-size: clamp(1.125rem, 2.4vw, 1.5rem);
    font-weight: 650;
    margin: 26px 0 0;
    max-width: 640px;
    overflow-wrap: anywhere;
}

.houston-events-open-pill {
    align-items: center;
    background: rgba(2, 20, 34, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    color: rgba(246, 241, 231, 0.72);
    display: inline-flex;
    font-weight: 750;
    gap: 10px;
    margin-top: 36px;
    min-height: 44px;
    padding: 0 22px;
}

.houston-events-open-pill::before {
    background: var(--houston-teal);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(24, 185, 145, 0.12);
    content: "";
    height: 10px;
    width: 10px;
}

.houston-events-section {
    margin-top: 48px;
}

.houston-events-section-heading {
    align-items: center;
    color: #c9c1b2;
    display: grid;
    font-size: 0.875rem;
    font-weight: 950;
    gap: 16px;
    grid-template-columns: auto 1fr;
    letter-spacing: 0.16em;
    margin: 0 0 22px;
    text-transform: uppercase;
}

.houston-events-section-heading::after {
    background: var(--houston-line);
    content: "";
    height: 1px;
}

.houston-events-grid {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: relative;
}

.houston-events-grid.is-special {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.96fr);
}

.houston-events-grid.is-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.houston-events-anchor {
    height: 1px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: -96px;
    width: 1px;
}

.houston-event-experience-card,
.houston-events-info-card,
.houston-events-cta-band,
.houston-events-trust-strip {
    background: var(--houston-card);
    border: 1px solid var(--houston-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
}

.houston-event-experience-card {
    display: grid;
    grid-template-rows: 260px 1fr;
    min-width: 0;
    overflow: hidden;
    scroll-margin-top: 110px;
}

.houston-event-experience-card.is-featured {
    border-color: rgba(24, 185, 145, 0.6);
    box-shadow: 0 0 0 1px rgba(24, 185, 145, 0.18), 0 18px 48px rgba(0, 0, 0, 0.24);
}

.houston-events-art-band {
    display: grid;
    font-size: 3rem;
    isolation: isolate;
    line-height: 1;
    place-items: center;
    position: relative;
}

.houston-events-art-band::before {
    background:
        radial-gradient(circle at 22% 26%, rgba(255, 255, 255, 0.08), transparent 16rem),
        linear-gradient(140deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 26px);
    content: "";
    inset: 0;
    position: absolute;
    z-index: -1;
}

.houston-events-art-royal {
    background:
        radial-gradient(circle at 78% 24%, rgba(255, 214, 102, 0.22), transparent 9rem),
        radial-gradient(circle at 18% 80%, rgba(255, 255, 255, 0.10), transparent 8rem),
        linear-gradient(135deg, #55105f, #6d0f71 55%, #7a1662);
    /* No photo for this card: a real illustrated header, not a thin strip. */
    font-size: 5.5rem;
    min-height: 200px;
}

.houston-events-art-image {
    background: #062b48;
    overflow: hidden;
}

.houston-events-art-image img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* Princess Makeover card: let the art band match the image's 4:3 ratio so the
   full scene — including the bows along the bottom — shows without cropping. */
#princess-makeover {
    grid-template-rows: auto 1fr;
}

#princess-makeover .houston-events-art-image {
    aspect-ratio: 4 / 3;
}

#princess-makeover .houston-events-art-image img {
    object-position: center bottom;
}

.houston-events-card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
    padding: 26px;
}

.houston-events-card-topline {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    min-height: 32px;
}

.houston-events-tag {
    align-items: center;
    background: #effff9;
    border-radius: 999px;
    color: #2b8b72;
    display: inline-flex;
    font-size: 0.75rem;
    font-weight: 950;
    justify-content: center;
    letter-spacing: 0.1em;
    padding: 5px 12px;
    text-transform: uppercase;
}

.houston-events-tag.is-blue {
    background: #eff8ff;
    color: #406f9d;
}

.houston-events-tag.is-pink {
    background: #fff1f6;
    color: #be476b;
}

.houston-events-availability {
    background: #ffeaf4;
    border-radius: 999px;
    color: #b84b77;
    font-size: 0.75rem;
    font-weight: 900;
    padding: 5px 11px;
}

.houston-event-experience-card h2 {
    color: #fff8eb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.75rem;
    letter-spacing: -0.035em;
    line-height: 1.08;
    margin: 0;
    text-align: left;
}

.houston-events-description {
    color: var(--houston-muted);
    font-size: 1rem;
    font-weight: 680;
    margin: 0;
}

.houston-events-stats {
    border-top: 1px solid var(--houston-line);
    display: grid;
    gap: 14px 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-top: 16px;
}

.houston-events-stats span {
    color: var(--houston-muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 850;
}

.houston-events-stats strong {
    color: var(--houston-text);
    display: block;
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.2;
}

.houston-events-price-row {
    align-items: end;
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.houston-events-price {
    color: #ffffff;
    font-size: 1.75rem;
    font-weight: 950;
    letter-spacing: -0.04em;
    line-height: 1;
}

.houston-events-price small {
    color: var(--houston-muted);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0;
}

.houston-events-price.is-member {
    color: var(--houston-member-green);
    text-shadow: 0 0 24px rgba(29, 158, 117, 0.2);
}

.houston-events-price.is-member small {
    color: rgba(209, 239, 229, 0.8);
}

.houston-events-price.is-non-member {
    color: var(--houston-non-member-gray);
    text-decoration: line-through;
    text-decoration-color: rgba(140, 138, 131, 0.72);
    text-decoration-thickness: 2px;
}

.houston-events-save-note {
    align-items: center;
    background: var(--houston-amber);
    border-radius: 999px;
    box-shadow: 0 10px 22px rgba(239, 159, 39, 0.2);
    color: var(--houston-amber-text);
    display: flex;
    font-size: 0.82rem;
    font-weight: 950;
    justify-content: center;
    min-height: 34px;
}

/* Short scannable fine print (mileage, deposits, eligibility) instead of a
   run-on paragraph or a multi-line amber pill. One point per <li>. */
.houston-fine-list {
    color: var(--houston-muted);
    display: grid;
    font-size: 0.9rem;
    font-weight: 600;
    gap: 7px;
    line-height: 1.4;
    list-style: none;
    margin: 0;
    padding: 0;
}

.houston-fine-list li {
    padding-left: 18px;
    position: relative;
}

.houston-fine-list li::before {
    background: var(--houston-teal);
    border-radius: 50%;
    content: "";
    height: 6px;
    left: 2px;
    position: absolute;
    top: 0.55em;
    width: 6px;
}

.houston-events-card-actions {
    display: grid;
    gap: 12px;
    /* auto, not a fixed 136px: "Non-member" needs ~150px at this weight and
       wrapped to two lines in the fixed track. */
    grid-template-columns: minmax(0, 1fr) minmax(136px, auto);
    margin-top: auto;
}

/* Single-action cards (snorkeling, pickleball, arcade): center the lone button
   instead of leaving it pinned to the first grid column. */
/* Outreach cards carry three actions (book / call / email): stack them instead
   of wedging a phone number into the narrow second track. */
.houston-events-card-actions:has(> .houston-events-btn:nth-child(3)) {
    grid-template-columns: minmax(0, 1fr);
}

.houston-events-card-actions:has(> .houston-events-btn:only-child) {
    grid-template-columns: auto;
    justify-content: center;
}

.houston-events-btn {
    align-items: center;
    border: 1px solid var(--houston-line-strong);
    border-radius: 10px;
    color: var(--houston-text);
    cursor: pointer;
    display: inline-flex;
    font-size: 1rem;
    font-weight: 850;
    gap: 10px;
    justify-content: center;
    line-height: 1.2;
    min-height: 46px;
    padding: 8px 18px;
    text-align: center;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

.houston-events-btn:hover,
.houston-events-btn:focus-visible {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.42);
    transform: translateY(-1px);
}

.houston-events-btn.is-fill {
    background: var(--houston-coral);
    border-color: transparent;
    box-shadow: 0 12px 28px var(--houston-coral-shadow);
    color: #ffffff;
}

.houston-events-btn.is-fill:hover,
.houston-events-btn.is-fill:focus-visible {
    background: var(--houston-coral-hover);
    border-color: transparent;
    box-shadow: 0 16px 34px rgba(216, 90, 48, 0.38);
}

.houston-events-btn.is-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.26);
    color: var(--houston-muted-2);
    white-space: nowrap;
    width: 100%;
}

.houston-events-btn.is-ghost:hover,
.houston-events-btn.is-ghost:focus-visible {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.46);
    color: #ffffff;
}

.houston-events-side-stack {
    display: grid;
    gap: 22px;
    grid-template-rows: 1fr auto;
}

/* Beside a tall card the stack must still match its height. Split the space
   between the two cards and centre each one's content vertically, so the
   column reads as two balanced panels instead of one card with its content
   pinned to the top of a half-empty box (the old `1fr auto` stretched only
   the first card). A card whose content is taller than its half simply keeps
   its natural height; the other takes the remainder. */
.houston-events-side-stack:not(.is-fullrow) {
    grid-template-rows: 1fr 1fr;
}

.houston-events-side-stack:not(.is-fullrow) > .houston-events-info-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.houston-events-side-stack.is-fullrow {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
}

.houston-events-info-card {
    padding: 34px;
}

.houston-events-info-card h3 {
    color: var(--houston-teal);
    font-size: 0.82rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    margin: 0 0 20px;
    text-transform: uppercase;
}

/* FFG Suites panel: room card stacks image + CTA; FAQ mirrors .houston-info-section. */
.houston-ffg-room-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.houston-ffg-room-img {
    flex: 1 1 auto;
    min-height: 260px;
    object-fit: cover;
    height: 100% !important;
}

.houston-ffg-room-cta {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: auto;
}

.houston-ffg-room-cta p {
    color: #fff8eb;
    font-size: 1.08rem;
    font-weight: 760;
    line-height: 1.5;
    border-left: 2px solid var(--houston-teal);
    padding-left: 16px;
    margin: 0;
}

.houston-ffg-room-btn {
    align-self: flex-start;
    width: auto;
}

.houston-ffg-faq-card h3 {
    color: #fff8eb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.68rem;
    font-weight: 950;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 18px;
    text-transform: none;
}

.houston-ffg-faq-list {
    margin: 0;
}

.houston-ffg-faq-list dt {
    margin: 20px 0 0;
}

.houston-ffg-faq-list dt:first-child {
    margin-top: 0;
}

.houston-ffg-faq-list dt strong {
    color: #fff8eb;
    font-size: 1.06rem;
    font-weight: 760;
    line-height: 1.45;
}

.houston-ffg-faq-list dd {
    color: var(--houston-muted-2);
    font-size: 1rem;
    font-weight: 620;
    line-height: 1.55;
    margin: 6px 0 0;
}

.houston-events-check-list {
    color: var(--houston-muted-2);
    display: grid;
    font-size: 1.06rem;
    font-weight: 650;
    gap: 14px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.houston-events-check-list li {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

.houston-events-check-list li::before {
    align-items: center;
    border: 2px solid var(--houston-teal);
    border-radius: 50%;
    color: var(--houston-teal);
    content: "\2713";
    display: inline-flex;
    flex: 0 0 20px;
    font-size: 0.75rem;
    font-weight: 950;
    height: 20px;
    justify-content: center;
    line-height: 1;
    margin-top: 2px;
}

.houston-events-phone-card {
    padding: 28px 34px;
}

.houston-events-phone-card p {
    color: var(--houston-muted-2);
    font-size: 1rem;
    margin: 0;
}

.houston-events-phone-card b {
    color: #ffffff;
    display: block;
    font-size: clamp(1.25rem, 5.5vw, 1.75rem);
    letter-spacing: -0.035em;
    margin: 6px 0 2px;
    /* The contact email is one unbreakable word; at 1.75rem it forced the
       events grid 40–80px wider than a phone screen. */
    overflow-wrap: anywhere;
}

.houston-events-cta-band {
    align-items: center;
    background: linear-gradient(135deg, #083253, #062b48);
    border-color: rgba(9, 70, 118, 0.65);
    display: grid;
    gap: 24px;
    grid-template-columns: 1fr auto;
    margin-top: 52px;
    padding: 34px 42px;
}

.houston-events-cta-band h3 {
    color: #ffffff;
    font-size: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.16;
    margin: 0 0 4px;
}

.houston-events-cta-band p {
    color: rgba(246, 241, 231, 0.66);
    font-size: 1.06rem;
    font-weight: 650;
    margin: 0;
}

.houston-events-cta-band .houston-events-btn {
    min-width: 190px;
}

.houston-events-page .houston-events-trust-strip {
    background: rgba(37, 38, 34, 0.88);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 36px 0 0;
    overflow: hidden;
    padding: 0;
}

.houston-events-trust-item {
    border-right: 1px solid var(--houston-line);
    display: grid;
    min-height: 160px;
    padding: 28px 18px;
    place-items: center;
    text-align: center;
}

.houston-events-trust-item:last-child {
    border-right: 0;
}

.houston-events-trust-item span {
    color: var(--houston-teal);
    display: block;
    font-size: 1.55rem;
    margin-bottom: 12px;
}

.houston-events-trust-item b {
    color: #fff6ea;
    display: block;
    font-size: 0.94rem;
    margin-bottom: 4px;
}

.houston-events-trust-item small {
    color: var(--houston-muted);
    display: block;
    font-size: 0.82rem;
    font-weight: 650;
    line-height: 1.35;
    max-width: 180px;
}

.houston-info-main {
    padding-bottom: 58px;
}

.houston-info-hero {
    min-height: 300px;
}

.houston-info-toc {
    background: rgba(37, 38, 34, 0.88);
    border: 1px solid var(--houston-line);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 30px;
    padding: 14px;
    position: sticky;
    top: 92px;
    z-index: 4;
}

.houston-info-toc a {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--houston-line);
    border-radius: 999px;
    color: var(--houston-teal);
    font-size: 0.82rem;
    font-weight: 900;
    min-height: 34px;
    padding: 7px 14px;
    text-decoration: none;
}

.houston-info-toc a:hover,
.houston-info-toc a:focus-visible {
    border-color: var(--houston-teal);
    color: #ffffff;
}

.houston-info-section {
    background: var(--houston-card);
    border: 1px solid var(--houston-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    margin-bottom: 22px;
    padding: 30px 34px;
    scroll-margin-top: 160px;
}

.houston-info-section h2 {
    color: #fff8eb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.68rem;
    font-weight: 950;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 14px;
}

.houston-info-section p,
.houston-info-section li,
.houston-info-section td {
    color: var(--houston-muted-2);
    font-size: 1rem;
    font-weight: 620;
    line-height: 1.55;
}

.houston-info-section p {
    margin: 0;
    max-width: 74ch;
}

.houston-info-section p + p {
    margin-top: 12px;
}

.houston-info-section strong, .houston-ffg-faq-list dd strong {
    color: #fff8eb;
}

/* Operative rule, surfaced first and marked with an accent rule. */
.houston-info-section .houston-info-lead {
    color: #fff8eb;
    font-size: 1.08rem;
    font-weight: 760;
    line-height: 1.5;
    max-width: 64ch;
    border-left: 2px solid var(--houston-teal);
    padding-left: 16px;
    margin: 0 0 16px;
}

/* Supporting / legal elaboration, demoted beneath the lead. */
.houston-info-section .houston-info-detail {
    color: var(--houston-muted-2);
    font-size: 1rem;
    font-weight: 620;
    line-height: 1.55;
    max-width: 64ch;
    margin: 12px 0 0;
}

.houston-info-hours-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 1fr);
    margin-top: 18px;
}

.houston-info-address {
    color: var(--houston-muted-2);
    font-style: normal;
    font-weight: 620;
    line-height: 1.55;
}

.houston-info-address strong {
    color: #fff8eb;
    display: block;
    margin-bottom: 4px;
}

.houston-info-hours-table {
    border-collapse: collapse;
    width: 100%;
}

.houston-info-hours-table td {
    border-bottom: 1px solid var(--houston-line);
    padding: 10px 0;
}

.houston-info-hours-table td:last-child {
    color: #fff8eb;
    font-weight: 950;
    text-align: right;
}

.houston-info-link {
    color: var(--houston-teal);
    font-weight: 950;
    text-decoration: none;
}

.houston-info-link:hover,
.houston-info-link:focus-visible {
    text-decoration: underline;
}

.houston-info-section ul {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding-left: 20px;
}

.houston-info-animals {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 18px;
}

.houston-info-animal {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 18px 20px;
}

.houston-info-animal h3 {
    color: var(--houston-teal);
    font-size: 0.88rem;
    font-weight: 950;
    letter-spacing: 0.1em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.houston-info-animal ul {
    margin: 0;
    padding-left: 20px;
}

.houston-info-note {
    background: rgba(232, 96, 44, 0.13);
    border: 1px solid rgba(232, 96, 44, 0.34);
    border-radius: 12px;
    color: #ffd8c8;
    font-size: 0.95rem;
    font-weight: 760;
    line-height: 1.45;
    margin-top: 16px;
    padding: 16px 20px;
}

/* Park-info pages flag the note with a warning icon (icon + span markup). */
.houston-info-page .houston-info-note {
    align-items: flex-start;
    border-left: 3px solid var(--houston-coral);
    display: flex;
    gap: 13px;
    max-width: 64ch;
}

.houston-info-page .houston-info-note svg {
    flex: none;
    margin-top: 2px;
    stroke: var(--houston-coral);
}

.houston-info-page .houston-info-note span {
    display: block;
}

/* --- Readability pass: light Fraunces/Inter typography on the park-info pages.
   Keeps the site's dark theme + per-venue accent; only the type weight/scale
   is lifted to match the readable mockup. --- */
.houston-info-page .houston-info-hero,
.houston-info-page .houston-info-toc,
.houston-info-page .houston-info-section,
.houston-info-page .houston-info-address {
    font-family: "Inter", system-ui, -apple-system, sans-serif;
}

.houston-info-page .houston-events-hero h1,
.houston-info-page .houston-info-section h2 {
    font-family: "Fraunces", Georgia, "Times New Roman", serif;
}

.houston-info-page .houston-events-hero h1 {
    font-weight: 600;
    letter-spacing: -0.015em;
}

.houston-info-page .houston-info-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.005em;
}

.houston-info-page .houston-info-section p,
.houston-info-page .houston-info-section li,
.houston-info-page .houston-info-section td,
.houston-info-page .houston-info-address {
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.65;
}

.houston-info-page .houston-info-section .houston-info-lead {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.55;
}

.houston-info-page .houston-info-section .houston-info-detail, .houston-info-page .houston-events-hero p:not(.houston-events-eyebrow) {
    font-weight: 400;
}

.houston-info-page .houston-info-section strong,
.houston-info-page .houston-info-address strong,
.houston-info-page .houston-info-hours-table td:last-child {
    font-weight: 600;
}

.houston-info-page .houston-info-toc a {
    font-weight: 500;
}

.houston-groups-main,
.houston-party-main,
.houston-field-main {
    padding-bottom: 58px;
}

.houston-groups-hero {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 320px;
    text-align: center;
}

.houston-events-page .houston-groups-hero h1,
.houston-events-page .houston-groups-hero p:not(.houston-events-eyebrow) {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.houston-groups-hero .houston-events-eyebrow, .houston-party-hero .houston-events-eyebrow, .houston-field-hero .houston-events-eyebrow {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center;
}

.houston-groups-options {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 34px;
}

.houston-group-card {
    background: var(--houston-card);
    border: 1px solid var(--houston-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 290px;
    padding: 28px;
    text-align: center;
}

.houston-group-card.is-featured {
    border-color: rgba(24, 185, 145, 0.62);
    box-shadow: 0 0 0 1px rgba(24, 185, 145, 0.18), 0 18px 48px rgba(0, 0, 0, 0.24);
}

.houston-group-card span {
    color: var(--houston-teal);
    font-size: 0.78rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.houston-group-card h2,
.houston-party-section h2 {
    color: #fff8eb;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.72rem;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
}

.houston-group-card p,
.houston-party-section p,
.houston-party-section li,
.houston-party-cta-row span {
    color: var(--houston-muted-2);
    font-size: 1rem;
    font-weight: 620;
    line-height: 1.55;
    margin: 0;
}

.houston-group-card .houston-events-btn {
    margin-top: auto;
}

/* Field-trips prose sections: separate stacked paragraphs and keep a
   comfortable reading measure / line spacing. */
.houston-field-page .houston-party-section p {
    line-height: 1.72;
    max-width: 78ch;
}

.houston-field-page .houston-party-section p + p {
    margin-top: 16px;
}

.houston-party-hero {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 28px),
        linear-gradient(135deg, #073456 0%, #0d4a52 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 28px;
    min-height: 360px;
    overflow: hidden;
    padding: clamp(32px, 6vw, 58px);
}

.houston-field-hero {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 28px),
        linear-gradient(135deg, #073456 0%, #0d4a52 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    margin-bottom: 28px;
    min-height: 400px;
    overflow: hidden;
    padding: clamp(32px, 6vw, 58px);
    text-align: center;
}

.houston-party-hero > :first-child {
    justify-self: center;
    min-width: 0;
    text-align: center;
}

.houston-field-hero h1 {
    color: #fffaf0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.875rem, 8vw, 4.75rem);
    letter-spacing: -0.045em;
    line-height: 0.96;
    margin: 10px auto 18px;
    max-width: 760px;
    text-align: center;
}

.houston-field-hero p:not(.houston-events-eyebrow) {
    color: rgba(246, 241, 231, 0.72);
    font-size: clamp(1.125rem, 2.4vw, 1.45rem);
    font-weight: 650;
    margin: 0 auto 24px;
    max-width: 740px;
    text-align: center;
}

.houston-field-pillars {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 36px;
}

.houston-field-pillars article {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 22px;
    text-align: center;
}

.houston-field-pillars span {
    color: var(--houston-teal);
    display: block;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.14em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.houston-field-pillars h3 {
    color: #fff8eb;
    font-size: 1rem;
    font-weight: 950;
    margin: 0;
}

.houston-party-hero h1 {
    color: #fffaf0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.875rem, 8vw, 4.75rem);
    letter-spacing: -0.045em;
    line-height: 0.96;
    margin: 10px auto 18px;
    max-width: 760px;
    text-align: center;
}

.houston-party-hero p:not(.houston-events-eyebrow) {
    color: rgba(246, 241, 231, 0.72);
    font-size: clamp(1.125rem, 2.4vw, 1.45rem);
    font-weight: 650;
    margin: 0 auto 24px;
    max-width: 620px;
    text-align: center;
}

.houston-party-section {
    background: var(--houston-card);
    border: 1px solid var(--houston-line);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    margin-bottom: 22px;
    padding: 30px 34px;
}

.houston-party-section h2 {
    margin-bottom: 14px;
}

.houston-party-options,
.houston-party-addons,
.houston-field-pricing {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.houston-party-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.houston-field-pricing {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* auto-fit, not a fixed 3: Houston sells four packages, and a fixed three left
   the fourth alone on a second row. */
.houston-party-addons {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.houston-party-option,
.houston-party-addon,
.houston-field-price-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 22px 24px;
}

.houston-field-price-card.is-featured {
    border-color: rgba(24, 185, 145, 0.46);
}

.houston-party-option span {
    border-radius: 999px;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.12em;
    margin-bottom: 12px;
    padding: 4px 12px;
    text-transform: uppercase;
}

.houston-party-option .is-paid {
    background: rgba(232, 96, 44, 0.16);
    color: var(--houston-coral);
}

.houston-party-option h3,
.houston-party-addon h3,
.houston-field-price-card h3 {
    color: #fff8eb;
    font-size: 1.08rem;
    font-weight: 950;
    margin: 0 0 8px;
}

.houston-field-price-card > span {
    background: rgba(24, 185, 145, 0.12);
    border-radius: 999px;
    color: var(--houston-text);
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 900;
    margin: 10px 0 12px;
    padding: 4px 12px;
}

.houston-party-fineprint {
    color: var(--houston-muted);
    font-size: 0.86rem !important;
    margin-top: 14px !important;
}

.houston-party-addon {
    text-align: center;
}

.houston-party-addon h3 {
    color: var(--houston-teal);
    font-size: 0.88rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.houston-party-addon ul {
    text-align: left;
}

.houston-party-price {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 950;
    line-height: 1;
    margin-bottom: 8px;
}

.houston-party-section ul {
    display: grid;
    gap: 8px;
    margin: 14px 0 0;
    padding-left: 20px;
}

/* The section's generic ul/li rules would re-indent and enlarge the compact
   .houston-fine-list (field-trip price cards); keep the component's own style. */
.houston-party-section .houston-fine-list {
    gap: 7px;
    padding-left: 0;
}

.houston-party-section .houston-fine-list li {
    color: var(--houston-muted);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
}

.houston-party-section ul + p {
    margin-top: 16px;
}

.houston-party-section strong {
    color: #fff8eb;
}

.houston-field-checklist {
    list-style: none;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.houston-field-checklist li {
    padding-left: 32px;
    position: relative;
}

.houston-field-checklist li::before {
    align-items: center;
    background: rgba(24, 185, 145, 0.15);
    border-radius: 50%;
    color: var(--houston-teal);
    content: "\2713";
    display: inline-flex;
    font-size: 0.78rem;
    font-weight: 950;
    height: 22px;
    justify-content: center;
    left: 0;
    line-height: 1;
    position: absolute;
    top: 2px;
    width: 22px;
}

.houston-field-banner {
    align-items: center;
    background: linear-gradient(135deg, #073456 0%, #0d4a52 100%);
    border: 1px solid var(--houston-line);
    border-radius: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 30px 34px;
}

.houston-field-banner p {
    color: rgba(246, 241, 231, 0.76);
    font-size: 1.1rem;
    font-weight: 680;
    margin: 0;
    max-width: 640px;
}

.houston-field-booking-shell {
    margin-bottom: 48px;
    margin-top: 0;
}

.houston-birthday-booking-shell {
    margin-top: 0;
}

.houston-private-timing {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.houston-private-timing-card {
    align-items: center;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    cursor: pointer;
    display: grid;
    gap: 14px;
    grid-template-columns: auto minmax(0, 1fr);
    min-width: 0;
    padding: 14px;
}

.houston-private-timing-card:has(input:checked) {
    background: rgba(24, 185, 145, 0.1);
    border-color: rgba(24, 185, 145, 0.42);
}

.houston-private-timing-card input {
    accent-color: var(--houston-teal);
    height: 20px;
    width: 20px;
}

.houston-private-timing-card strong {
    color: #fff8eb;
    display: block;
    font-size: 1rem;
    font-weight: 950;
}

.houston-private-timing-card small {
    color: rgba(246, 241, 231, 0.72);
    display: block;
    font-size: 0.9rem;
    font-weight: 680;
    line-height: 1.35;
    margin-top: 4px;
}

.houston-party-cta-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 22px;
}

.houston-group-admission-main {
    padding-bottom: 58px;
}

.houston-group-admission-hero {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 260px);
}

.houston-group-admission-price {
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    color: #fff8eb;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 190px;
    padding: 24px;
    text-align: center;
}

.houston-group-admission-price span,
.houston-group-admission-price small {
    color: rgba(246, 241, 231, 0.72);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.houston-group-admission-price strong {
    color: var(--houston-teal);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 950;
    line-height: 1;
    margin: 10px 0 8px;
}

.houston-group-message {
    margin-bottom: 18px;
}

@media (max-width: 80em) and (min-width: 61.26em) {
    .houston-events-grid.is-trio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 61.25em) {
    .houston-events-grid,
    .houston-events-grid.is-special,
    .houston-events-grid.is-trio,
    .houston-events-side-stack.is-fullrow,
    .houston-info-hours-grid,
    .houston-groups-options,
    .houston-party-options,
    .houston-party-addons,
    .houston-field-pricing,
    .houston-field-pillars,
    .houston-party-hero,
    .houston-group-admission-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 48em) {
    .houston-site-nav,
    .houston-events-stats,
    .houston-events-price-row,
    .houston-events-card-actions,
    .houston-events-cta-band {
        grid-template-columns: 1fr;
    }

    .houston-site-logo {
        grid-column: 1;
        justify-self: center;
    }

    .houston-site-logo-main {
        font-size: clamp(2.45rem, 10.8vw, 3.9rem);
        justify-content: center;
        width: 100%;
    }

    .houston-site-logo-sub {
        font-size: clamp(0.86rem, 3.35vw, 1.24rem);
    }

    .houston-site-menu-toggle {
        background:
            linear-gradient(var(--houston-teal), var(--houston-teal)) left top / 34px 4px no-repeat,
            linear-gradient(var(--houston-teal), var(--houston-teal)) left center / 34px 4px no-repeat,
            linear-gradient(var(--houston-teal), var(--houston-teal)) left bottom / 34px 4px no-repeat;
        grid-column: 1;
        grid-row: 1;
        display: block;
        justify-self: start;
        left: 18px;
        top: 50%;
        z-index: 2;
    }

    .houston-site-nav.is-menu-open {
        padding-bottom: 0;
    }

    .houston-site-nav.is-menu-open .houston-site-menu-toggle {
        top: clamp(56px, 11.5vw, 68px);
    }

    .houston-site-nav.is-menu-open .houston-site-menu {
        background: #1d1d1a;
        border-top: 1px solid var(--houston-line);
        border-top-color: var(--houston-line);
        box-shadow: 0 18px 34px rgba(0, 0, 0, 0.3);
        display: grid;
        gap: 8px;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: 1fr;
        justify-items: stretch;
        padding: 14px 18px 18px;
    }

    .houston-site-nav.is-menu-open .houston-site-menu > a,
    .houston-site-nav.is-menu-open .houston-site-menu-item > a {
        box-sizing: border-box;
        border-radius: 7px;
        color: var(--houston-muted-2);
        display: flex;
        font-size: 0.86rem;
        justify-content: center;
        letter-spacing: 0.04em;
        min-height: 46px;
        padding: 0 14px;
        text-align: center;
        width: 100%;
    }

    .houston-site-nav.is-menu-open .houston-site-menu > a.is-active,
    .houston-site-nav.is-menu-open .houston-site-menu > a:hover,
    .houston-site-nav.is-menu-open .houston-site-menu > a:focus-visible,
    .houston-site-nav.is-menu-open .houston-site-menu-item > a.is-active,
    .houston-site-nav.is-menu-open .houston-site-menu-item > a:hover,
    .houston-site-nav.is-menu-open .houston-site-menu-item > a:focus-visible {
        background: rgba(24, 185, 145, 0.14);
        color: #ffffff;
    }

    .houston-site-hero::after {
        background: var(--houston-bg);
    }

    .houston-events-main {
        padding: 16px 16px 34px;
    }

    .houston-info-toc {
        position: static;
    }

    .houston-info-section {
        padding: 24px 20px;
        scroll-margin-top: 96px;
    }

    .houston-group-card,
    .houston-party-section,
    .houston-field-banner {
        padding: 24px 20px;
    }

    .houston-events-page .houston-events-hero {
        border-radius: 18px;
        min-height: 330px;
        padding: 32px 28px;
    }

    .houston-events-open-pill {
        margin-top: 28px;
    }

    .houston-event-experience-card {
        grid-template-rows: 210px 1fr;
    }

    .houston-events-card-body {
        padding: 22px;
    }

    .houston-events-cta-band {
        padding: 28px;
    }

    .houston-events-page .houston-events-trust-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    .houston-events-trust-item:nth-child(2) {
        border-right: 0;
    }

    .houston-events-trust-item:nth-child(-n + 2) {
        border-bottom: 1px solid var(--houston-line);
    }
}

@media (max-width: 32.5em) {
    .houston-site-nav {
        padding-left: 16px;
        padding-right: 16px;
    }

    .houston-site-menu-toggle {
        background:
            linear-gradient(var(--houston-teal), var(--houston-teal)) left top / 30px 3px no-repeat,
            linear-gradient(var(--houston-teal), var(--houston-teal)) left center / 30px 3px no-repeat,
            linear-gradient(var(--houston-teal), var(--houston-teal)) left bottom / 30px 3px no-repeat;
        left: 16px;
    }

    .houston-site-nav.is-menu-open .houston-site-menu {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .houston-events-page .houston-events-hero {
        padding: 28px 22px;
    }

    .houston-events-eyebrow {
        font-size: 0.72rem !important;
        letter-spacing: 0.11em;
    }

    .houston-events-page .houston-events-hero h1 {
        font-size: 2.2rem;
        line-height: 1.02;
    }

    .houston-events-page .houston-events-hero p:not(.houston-events-eyebrow) {
        font-size: 0.98rem;
    }

    .houston-events-section-heading {
        font-size: 0.75rem;
    }

    .houston-event-experience-card h2 {
        font-size: 1.56rem;
    }

    .houston-events-page .houston-events-trust-strip {
        grid-template-columns: 1fr;
    }

    .houston-events-trust-item,
    .houston-events-trust-item:nth-child(2) {
        border-bottom: 1px solid var(--houston-line);
        border-right: 0;
    }

    .houston-events-trust-item:last-child {
        border-bottom: 0;
    }
}

/* =========================================================================
   Houston shared inline calendar component (.houston-calendar-*).
   Used on all Houston booking pages (event checkout, field trips, birthday
   parties, group admission). Self-contained: each color resolves a --houston-*
   variable when present but falls back to the literal Houston-teal palette so
   the calendar renders identically even where those vars are not defined.
   There is intentionally NO "today"/current-day highlight: only the selected
   day is highlighted.
   ========================================================================= */
.houston-calendar {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--houston-line, rgba(255, 255, 255, 0.13));
    border-radius: 10px;
    margin-top: 8px;
    max-width: 270px;
    padding: 10px;
}

.houston-calendar-header {
    align-items: center;
    display: grid;
    gap: 6px;
    grid-template-columns: 28px 1fr 28px;
    margin-bottom: 8px;
}

.houston-calendar-month {
    color: var(--houston-text, #f6f1e7);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
}

.houston-calendar-nav {
    align-items: center;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--houston-line, rgba(255, 255, 255, 0.13));
    border-radius: 6px;
    color: var(--houston-text, #f6f1e7);
    cursor: pointer;
    display: inline-flex;
    font-size: 1.05rem;
    font-weight: 800;
    height: 28px;
    justify-content: center;
    line-height: 1;
    width: 28px;
}

.houston-calendar-nav:hover:not(:disabled) {
    background: rgba(24, 185, 145, 0.2);
    border-color: var(--houston-teal, #18b991);
}

.houston-calendar-nav:disabled {
    cursor: not-allowed;
    opacity: 0.38;
}

.houston-calendar-weekdays,
.houston-calendar-grid {
    display: grid;
    gap: 3px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.houston-calendar-weekdays {
    color: var(--houston-muted, #aaa69d);
    font-size: 0.58rem;
    font-weight: 800;
    margin-bottom: 4px;
    text-align: center;
    text-transform: uppercase;
}

.houston-calendar-empty {
    min-height: 28px;
}

.houston-calendar-day {
    align-items: center;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--houston-line, rgba(255, 255, 255, 0.13));
    border-radius: 6px;
    color: var(--houston-text, #f6f1e7);
    cursor: pointer;
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 700;
    justify-content: center;
    min-height: 28px;
    min-width: 0;
}

/* Only selectable days get the teal hover/focus cue — disabled days must
   not look clickable. */
.houston-calendar-day:hover:not(:disabled),
.houston-calendar-day:focus-visible:not(:disabled) {
    border-color: var(--houston-teal, #18b991);
    outline: none;
}

.houston-calendar-day.is-selected {
    background: var(--houston-teal, #18b991);
    border-color: var(--houston-teal, #18b991);
    color: #08231c;
}

/* Unavailable (past) days: flat, borderless, struck through — clearly inert. */
.houston-calendar-day.is-disabled,
.houston-calendar-day:disabled {
    background: transparent;
    border-color: transparent;
    color: rgba(246, 241, 231, 0.26);
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Dates blocked only by the minimum-lead-time rule keep a help cursor so the
   explanatory title tooltip reads as informational rather than an error. */
.houston-calendar-day.is-lead-blocked {
    cursor: help;
}

/* ==========================================================================
   Austin desktop navbar: logo position shared across EVERY Austin page.

   The landing page centres its logo over the hero headline ("An Interactive
   Adventure Like No Other!"). The other Austin pages (events, groups, park
   info, checkout, …) have no such headline, but the user must see the logo in
   the SAME place on all of them so it never jumps when navigating. So instead
   of measuring the headline per-page in JS, we bake that position in as a fixed
   offset applied to every Austin page (scoped to .austin-theme).

   The offset was measured from the landing's headline-centred logo: its centre
   sits ≈262px from the page edge. The logo is left-anchored and pushed right
   so logoCentre = gutter + 91 (half the 182px mark) + margin = 262, i.e.
   margin = 171px - gutter. That full offset costs ~120px of row width, so
   the margin grows with the viewport instead: 0 at 77.5em (just above the
   76.25em single-row tier, leaving room for the scrollbar that 100vw counts),
   reaching the full offset ~120px later. The row therefore never needs more
   width than the logo-at-gutter layout. If the logo image's width (182px)
   changes, re-measure.
   Mobile (<= 768px, hamburger) centres the logo on its own.
   ========================================================================== */
@media (min-width: 56.3125em) {
    .houston-site-body.austin-theme .houston-site-logo {
        margin-left: clamp(0px, 100vw - 77.5em, 171px - var(--houston-nav-gutter));
    }
}

/* =========================================================================
   Houston landing — mobile design pass (phones, <= 48em).
   Appended last so it wins the cascade over the earlier light/dark rules.
   This is a full polish, not just layout: glassy hero price strip with
   coloured check bullets, premium gradient ticket cards with a teal-glow
   featured state, an editorial exhibit gallery with labels set over the
   image, accent bars under section headings, and a framed map — all tuned
   to the warm-dark / teal-coral palette. Mobile-only; desktop untouched.
   ========================================================================= */
@media (max-width: 48em) {
    /* ---- Hero ---------------------------------------------------------- */
    .houston-site-hero {
        padding-top: 90px;
        padding-bottom: 80px;
    }

    .houston-site-hero h1 {
        letter-spacing: -0.012em;
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.42);
    }

    .houston-site-hero p {
        color: rgba(246, 241, 231, 0.92);
        text-shadow: 0 1px 12px rgba(0, 0, 0, 0.38);
    }

    /* Price strip → glassy card; bullets become filled coloured checks. */
    .houston-site-price-strip {
        background: linear-gradient(165deg, rgba(13, 30, 47, 0.94), rgba(8, 18, 30, 0.88));
        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 16px;
        box-shadow: 0 22px 52px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.07);
        max-width: 320px;
        padding: 4px 20px;
    }

    .houston-site-price-strip div {
        gap: 1px 14px;
        padding: 12px 0;
    }

    .houston-site-price-strip div::before {
        background: var(--houston-teal)
            url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='3.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2013l4%204L19%207'/%3E%3C/svg%3E")
            center / 17px 17px no-repeat;
        border: 0;
        box-shadow: 0 0 0 4px rgba(24, 185, 145, 0.16);
        height: 30px;
        width: 30px;
    }

    .houston-site-price-strip div:nth-child(2)::before {
        background-color: var(--houston-coral);
        box-shadow: 0 0 0 4px rgba(216, 90, 48, 0.18);
    }

    /* ---- Section headings: shared accent bar for a consistent rhythm --- */
    .houston-ticket-intro h2,
    .houston-exhibit-panel h2 {
        font-size: 1.55rem;
        letter-spacing: 0.01em;
    }

    .houston-ticket-intro h2::after,
    .houston-exhibit-panel h2::after {
        background: linear-gradient(90deg, var(--houston-teal), var(--houston-coral));
        border-radius: 999px;
        content: "";
        display: block;
        height: 4px;
        margin-top: 12px;
        width: 48px;
    }

    /* ---- Ticket band --------------------------------------------------- */
    .houston-ticket-band {
        padding-top: 32px;
        padding-bottom: 12px;
        row-gap: 20px;
    }

    .houston-ticket-intro h2 {
        margin-bottom: 16px;
    }

    .houston-ticket-intro p {
        font-size: 1rem;
        line-height: 1.5;
        margin: 14px 0 18px;
    }

    .houston-digital-badge {
        background: rgba(70, 173, 85, 0.1);
        border: 1px solid rgba(70, 173, 85, 0.32);
        border-radius: 999px;
        gap: 12px;
        max-width: 100%;
        padding: 8px 16px 8px 8px;
        width: fit-content;
    }

    .houston-digital-badge span {
        height: 36px;
        width: 36px;
    }

    /* Premium card surface; content hugs without a hollow lower half. */
    .houston-ticket-card {
        background: linear-gradient(168deg, #313229 0%, #272824 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        box-shadow: 0 16px 38px rgba(0, 0, 0, 0.3);
        min-height: 0;
        overflow: visible;
        padding: 28px 24px 26px;
    }

    .houston-ticket-card h3 {
        font-size: 1.05rem;
        letter-spacing: 0.05em;
        margin-bottom: 10px;
    }

    .houston-ticket-price {
        font-size: 2.5rem !important;
        letter-spacing: -0.01em;
        margin-bottom: 12px !important;
    }

    .houston-ticket-card p {
        font-size: 0.95rem;
        line-height: 1.4;
        max-width: 320px;
    }

    .houston-ticket-card .houston-site-btn {
        border-radius: 12px;
        font-size: 1.02rem;
        height: 56px;
        letter-spacing: 0.04em;
        margin-top: 20px;
        max-width: 320px;
        min-height: 56px;
    }

    .houston-ticket-card-featured {
        border-color: rgba(70, 173, 85, 0.5);
        box-shadow:
            0 0 0 1px rgba(70, 173, 85, 0.28),
            0 18px 46px rgba(0, 0, 0, 0.34),
            0 0 56px rgba(70, 173, 85, 0.1);
        padding-top: 32px;
    }

    .houston-ticket-ribbon {
        border-radius: 999px;
        box-shadow: 0 6px 16px rgba(70, 173, 85, 0.32);
        font-size: 0.7rem;
        letter-spacing: 0.06em;
        padding: 8px 18px;
        top: -12px;
    }

    /* Drop the flag-notch triangles — they fragment against the rounded pill. */
    .houston-ticket-ribbon::before,
    .houston-ticket-ribbon::after {
        content: none;
    }

    /* ---- Exhibits: editorial gallery, labels set over the image -------- */
    .houston-exhibit-panel {
        margin-top: 6px;
    }

    .houston-exhibit-panel h2 {
        margin-bottom: 16px;
    }

    .houston-exhibit-grid {
        gap: 12px;
        grid-template-columns: 1fr 1fr;
    }

    .houston-exhibit-card {
        border: 0;
        border-radius: 16px;
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
        position: relative;
    }

    .houston-exhibit-card img {
        aspect-ratio: 1 / 1;
    }

    .houston-exhibit-card h3 {
        align-items: flex-end;
        background: linear-gradient(to top, rgba(7, 13, 21, 0.9) 0%, rgba(7, 13, 21, 0.36) 52%, transparent 100%);
        bottom: 0;
        color: #ffffff;
        font-size: 0.82rem;
        justify-content: flex-start;
        left: 0;
        letter-spacing: 0.04em;
        min-height: 0;
        padding: 26px 14px 12px;
        position: absolute;
        right: 0;
        text-align: left;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
    }

    /* ---- Visit band & map --------------------------------------------- */
    .houston-visit-band {
        gap: 24px;
        padding-top: 26px;
        padding-bottom: 28px;
    }
}

/* ------------------------------------------------------------------ */
/* Post-checkout confirmation page (event_success.html)        */
/* ------------------------------------------------------------------ */
.houston-success-hero {
    min-height: 0 !important;
}

/* Dynamic status panel (filled by event_success.js). */
.houston-success-status {
    background: linear-gradient(150deg, rgba(24, 185, 145, 0.12), rgba(255, 255, 255, 0.04));
    border: 1px solid rgba(24, 185, 145, 0.32);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
    color: var(--houston-text);
    margin-top: 18px;
    padding: clamp(24px, 4vw, 38px);
}

.houston-success-msg {
    color: var(--houston-muted-2);
    font-size: 1.1rem;
    font-weight: 650;
}

.houston-success-msg.is-pending::before {
    background: var(--houston-amber);
    border-radius: 50%;
    content: "";
    display: inline-block;
    height: 10px;
    margin-right: 10px;
    vertical-align: middle;
    width: 10px;
    animation: houston-success-pulse 1.2s ease-in-out infinite;
}

.houston-success-msg.is-error {
    color: #ffb4a0;
    font-weight: 700;
}

@keyframes houston-success-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

/* Confirmed / request-received result block. */
.houston-success-result {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.houston-success-check {
    align-items: center;
    background: var(--houston-teal);
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(24, 185, 145, 0.14);
    display: inline-flex;
    height: 52px;
    justify-content: center;
    width: 52px;
}

.houston-success-check::after {
    border: solid #07241c;
    border-width: 0 4px 4px 0;
    content: "";
    height: 22px;
    margin-top: -6px;
    transform: rotate(45deg);
    width: 11px;
}

.houston-success-headline {
    color: #fffaf0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.houston-success-body {
    color: var(--houston-muted-2);
    font-size: 1.12rem;
    font-weight: 600;
    line-height: 1.55;
    max-width: 620px;
}

.houston-success-body strong {
    color: var(--houston-text);
    font-weight: 800;
}

.houston-success-note {
    color: var(--houston-muted);
    font-size: 0.98rem;
    font-weight: 600;
    line-height: 1.5;
    max-width: 620px;
}

/* Plan-your-visit helper cards. */
.houston-success-cards {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.houston-success-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.houston-success-card p {
    color: var(--houston-muted-2);
    font-size: 1.04rem;
    font-weight: 600;
    line-height: 1.55;
    margin: 0;
}

.houston-success-card .houston-events-btn {
    margin-top: auto;
}

.houston-success-address {
    color: var(--houston-text) !important;
    font-weight: 750 !important;
}

.houston-success-phone {
    color: var(--houston-teal);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-decoration: none;
}

.houston-success-phone:hover,
.houston-success-phone:focus-visible {
    text-decoration: underline;
}

.houston-success-help-note {
    color: var(--houston-muted) !important;
    font-size: 0.95rem !important;
}

@media (max-width: 60em) {
    .houston-success-cards {
        grid-template-columns: 1fr;
    }
}

/* ====================================================================
   Visit band — "Find Us" redesign (shared across all venue landings).
   Four balanced columns on desktop: intro · contact · hours · map.
   Auto-themes through the existing accent (--houston-teal) and the
   primary CTA tokens, so Austin/Houston/San Antonio each pick up their
   own colors with no per-venue CSS. Opt in with .is-redesigned so the
   higher-specificity rules win over the original light + dark skins.
   ==================================================================== */
.houston-visit-band.is-redesigned {
    align-items: stretch;
    border-top: 1px solid var(--houston-line);
    column-gap: 44px;
    grid-template-columns: 1.25fr 1fr 0.9fr 1.7fr;
    padding: 46px 64px 52px;
    row-gap: 34px;
}

.houston-visit-band.is-redesigned .houston-visit-intro {
    align-self: start;
}

.houston-visit-eyebrow {
    color: var(--houston-teal);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    margin: 0 0 10px;
    text-transform: uppercase;
}

.houston-visit-band.is-redesigned .houston-visit-intro h2 {
    color: var(--houston-text);
    font-size: 1.6rem;
    line-height: 1.18;
    margin: 0 0 12px;
}

.houston-visit-lede {
    color: var(--houston-muted);
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
    max-width: 26ch;
}

/* Small uppercase label that heads each detail group. */
.houston-visit-band.is-redesigned .houston-visit-label {
    color: var(--houston-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin: 0 0 12px;
    text-transform: uppercase;
}

.houston-visit-band.is-redesigned .houston-visit-contact {
    align-content: start;
    display: grid;
    gap: 24px;
}

.houston-visit-band.is-redesigned .houston-visit-detail, .houston-success-status p {
    margin: 0;
}

.houston-visit-band.is-redesigned .houston-visit-detail p {
    color: var(--houston-text);
    font-size: 0.98rem;
}

.houston-visit-band.is-redesigned .houston-visit-detail-link {
    color: var(--houston-text);
    text-decoration: none;
    transition: color 0.15s ease;
}

.houston-visit-band.is-redesigned .houston-visit-detail-link:hover {
    color: var(--houston-teal);
}

/* Hours: borderless rows with the label/value pushed to the edges. */
.houston-visit-band.is-redesigned .houston-visit-hours {
    align-content: start;
    border-left: 0;
    display: block;
    min-height: 0;
    padding-left: 0;
}

.houston-visit-band.is-redesigned .houston-visit-hours dl {
    display: grid;
    gap: 0;
}

.houston-visit-band.is-redesigned .houston-visit-hours dl > div {
    align-items: baseline;
    border-top: 1px solid var(--houston-line);
    display: flex;
    gap: 12px;
    grid-template-columns: none;
    justify-content: space-between;
    padding: 9px 0;
}

.houston-visit-band.is-redesigned .houston-visit-hours dl > div:first-child {
    border-top: 0;
    padding-top: 0;
}

.houston-visit-band.is-redesigned .houston-visit-hours dt {
    color: var(--houston-muted);
    font-weight: 700;
}

.houston-visit-band.is-redesigned .houston-visit-hours dd {
    color: var(--houston-text);
    white-space: nowrap;
}

/* Map: fills the column height with the directions button beneath it. */
.houston-visit-band.is-redesigned .venue-map {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.houston-visit-band.is-redesigned .venue-map-canvas {
    border: 1px solid var(--houston-line);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.32);
    flex: 1 1 auto;
    min-height: 300px;
}

/* Settle the map into the dark theme rather than glaring bright white. */
.houston-visit-band.is-redesigned .venue-map-frame {
    filter: grayscale(0.12) contrast(1.02);
}

.venue-map-tag {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    padding: 8px 11px;
    pointer-events: none;
    position: absolute;
    /* Top-right: OSM puts zoom controls top-left and attribution along the bottom. */
    right: 12px;
    top: 12px;
}

.venue-map-tag b {
    color: #23211c;
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
}

.venue-map-tag span {
    color: #6a675f;
    font-size: 0.7rem;
}

.houston-visit-band.is-redesigned .venue-map-directions {
    align-self: start;
    margin-top: 16px;
}

@media (max-width: 1080px) {
    .houston-visit-band.is-redesigned {
        column-gap: 32px;
        grid-template-columns: 1fr 1fr;
    }

    .houston-visit-band.is-redesigned .venue-map {
        grid-column: 1 / -1;
    }

    .houston-visit-band.is-redesigned .venue-map-canvas {
        min-height: 320px;
    }
}

@media (max-width: 640px) {
    .houston-visit-band.is-redesigned {
        grid-template-columns: 1fr;
        padding: 34px 22px 40px;
        row-gap: 28px;
    }

    .houston-visit-band.is-redesigned .houston-visit-lede {
        max-width: none;
    }

    .houston-visit-band.is-redesigned .venue-map-directions {
        align-self: stretch;
        text-align: center;
    }
}

/* =====================================================================
   Mobile nav bar (authoritative — placed last to win over the layered
   breakpoints above). Layout: [logo] ........ [Buy Tickets] [hamburger].
   Member is demoted into the drawer; the cramped hours block is dropped.
   ===================================================================== */
@media (max-width: 48em) {
    .houston-site-nav {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        position: relative;
    }

    /* Bar order, left -> right: logo ........ Buy Tickets  hamburger */
    .houston-site-logo {
        order: 1;
        margin: 0 auto 0 0;   /* margin-right:auto pushes the rest to the right */
        width: auto;
        min-width: 0;
        transform: none;
    }

    .houston-site-logo .houston-site-logo-image {
        width: 100%;
        max-width: 140px;
    }

    /* Declutter: hours move out of the bar (still in the page/footer). */
    .houston-site-hours {
        display: none;
    }

    /* Buy Tickets is not shown in the bar (kept on the default mobile hide);
       Member is also demoted into the drawer. The bar is just logo + menu. */
    .houston-site-nav-member-cta {
        display: none;
    }

    .houston-site-menu-toggle {
        order: 3;
        flex: 0 0 auto;
        /* An earlier mobile block pins the toggle absolutely at the left edge,
           which put it on top of the logo between 601px and 768px (the
           checkout-preview nav takes over below that). Keep it in the row. */
        position: static;
        transform: none;
    }

    /* Same burger as the phone nav (.cp-menu-btn in checkout_preview.css):
       three thin text-coloured lines, right-aligned, a shorter middle line,
       morphing into an X when open. The phone nav only rebuilds the toggle
       at <= 600px, so 601-768px still drew the older thick accent bars from
       the gradient backgrounds above. The one span is the middle line; its
       pseudo-elements are the outer two. */
    .houston-site-nav .houston-site-menu-toggle:not(.cp-menu-btn) {
        align-items: center;
        background: none;
        display: flex;
        height: 48px;
        justify-content: flex-end;
        padding: 0 2px 0 0;
        width: 48px;
    }

    .houston-site-nav .houston-site-menu-toggle:not(.cp-menu-btn) span,
    .houston-site-nav .houston-site-menu-toggle:not(.cp-menu-btn) span::before,
    .houston-site-nav .houston-site-menu-toggle:not(.cp-menu-btn) span::after {
        background: var(--houston-text);
        border-radius: 2px;
        display: block;
        height: 2px;
        transition: transform 0.26s ease, background-color 0.18s ease, width 0.26s ease;
    }

    .houston-site-nav .houston-site-menu-toggle:not(.cp-menu-btn) span {
        position: relative;
        width: 16px;
    }

    .houston-site-nav .houston-site-menu-toggle:not(.cp-menu-btn) span::before,
    .houston-site-nav .houston-site-menu-toggle:not(.cp-menu-btn) span::after {
        content: "";
        position: absolute;
        right: 0;
        width: 22px;
    }

    .houston-site-nav .houston-site-menu-toggle:not(.cp-menu-btn) span::before {
        top: -7px;
    }

    .houston-site-nav .houston-site-menu-toggle:not(.cp-menu-btn) span::after {
        top: 7px;
    }

    .houston-site-nav.is-menu-open .houston-site-menu-toggle:not(.cp-menu-btn) span {
        background-color: transparent;
    }

    .houston-site-nav.is-menu-open .houston-site-menu-toggle:not(.cp-menu-btn) span::before {
        transform: translateY(7px) rotate(45deg);
        width: 23px;
    }

    .houston-site-nav.is-menu-open .houston-site-menu-toggle:not(.cp-menu-btn) span::after {
        transform: translateY(-7px) rotate(-45deg);
        width: 23px;
    }

    /* Drawer pops as a full-width overlay below the bar (kept out of the
       single-line flex row so the bar items never wrap). */
    .houston-site-nav.is-menu-open .houston-site-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: auto;
        margin: 0;
        z-index: 50;
    }

    /* Reveal the drawer-only Member sign-in row when the menu is open. */
    .houston-site-nav.is-menu-open .houston-site-menu-mobile-extra {
        display: inline-flex;
    }
}

/* --- Park-information layout pass (desktop) ---
   Every policy card used to cap its text at ~64ch inside a full-width card,
   leaving the right 40% blank. On wide screens the card becomes two columns:
   a sticky heading rail on the left, the policy copy on the right. Below
   900px nothing changes (single column). --- */
.houston-info-page .houston-info-hero {
    min-height: 220px;
}

.houston-info-directions {
    border: 1px solid var(--houston-teal);
    border-radius: 999px;
    display: inline-block;
    margin: 2px 0 6px;
    padding: 8px 18px;
}

.houston-info-directions:hover,
.houston-info-directions:focus-visible {
    background: var(--houston-teal);
    color: #10110f;
    text-decoration: none;
}

@media (min-width: 900px) {
    .houston-info-page .houston-info-section {
        column-gap: 48px;
        display: grid;
        grid-template-columns: minmax(200px, 250px) minmax(0, 1fr);
    }

    .houston-info-page .houston-info-section > h2 {
        align-self: start;
        grid-column: 1;
        grid-row: 1 / span 12;
        margin: 0;
        position: sticky;
        top: 220px;
    }

    .houston-info-page .houston-info-section > :not(h2) {
        grid-column: 2;
    }

    .houston-info-page .houston-info-section > .houston-info-hours-grid {
        margin-top: 0;
    }

    .houston-info-page .houston-info-section p,
    .houston-info-page .houston-info-section .houston-info-lead,
    .houston-info-page .houston-info-section .houston-info-detail,
    .houston-info-page .houston-info-note {
        max-width: none;
    }

    .houston-info-page .houston-info-section p:last-child {
        margin-bottom: 0;
    }
}

/* --- Checkboxes and radios (themed pages) ---
   Native controls rendered as small white OS widgets on the dark cards, with
   no clear checked state. Drawn here once, in the per-venue accent, for every
   page that uses layout.html. :where() keeps the body prefix at zero
   specificity so any page-level rule (a visually-hidden toggle, a sized
   control) still wins without a fight. */
:where(.houston-site-body) input[type="checkbox"],
:where(.houston-site-body) input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: rgba(0, 0, 0, 0.3);
    background-position: center;
    background-repeat: no-repeat;
    border: 1.5px solid var(--houston-control-border, rgba(255, 255, 255, 0.55));
    cursor: pointer;
    flex: none;
    height: 20px;
    margin: 0;
    transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
    vertical-align: middle;
    width: 20px;
}

:where(.houston-site-body) input[type="checkbox"] {
    border-radius: 6px;
}

:where(.houston-site-body) input[type="radio"] {
    border-radius: 50%;
}

:where(.houston-site-body) input[type="checkbox"]:hover:not(:disabled),
:where(.houston-site-body) input[type="radio"]:hover:not(:disabled) {
    border-color: var(--houston-teal);
}

:where(.houston-site-body) input[type="checkbox"]:checked {
    background-color: var(--houston-teal);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2310110f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
    background-size: 78%;
    border-color: var(--houston-teal);
}

:where(.houston-site-body) input[type="radio"]:checked {
    background-color: var(--houston-teal);
    background-image: radial-gradient(circle, #10110f 0 30%, transparent 34%);
    border-color: var(--houston-teal);
}

:where(.houston-site-body) input[type="checkbox"]:focus-visible,
:where(.houston-site-body) input[type="radio"]:focus-visible {
    outline: 2px solid var(--houston-teal);
    outline-offset: 2px;
}

:where(.houston-site-body) input[type="checkbox"]:disabled,
:where(.houston-site-body) input[type="radio"]:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

@media (forced-colors: active) {
    :where(.houston-site-body) input[type="checkbox"]:checked,
    :where(.houston-site-body) input[type="radio"]:checked {
        background-color: Highlight;
        border-color: Highlight;
        forced-color-adjust: none;
    }
}