@font-face {
    font-family: superior_regular;
    src: url(fonts/LTSuperior-Regular.otf);
}

@font-face {
    font-family: superior_medium;
    src: url(fonts/LTSuperior-Medium.otf);
}

@font-face {
    font-family: headings;
    src: url(fonts/neue_einstellung_medium.otf);
}

@font-face {
    font-family: headings-light;
    src: url(fonts/neue_einstellung_regular.otf);
}

@font-face {
    font-family: headings-bold;
    src: url(fonts/neue_einstellung_bold.otf);
}

@font-face {
    font-family: headings-extrabold;
    src: url(fonts/neue_einstellung_extrabold.otf);
}

@font-face {
    font-family: headings-black;
    src: url(fonts/neue_einstellung_black.otf);
}

h1, h2, h3, h4, h5, h6,p {margin: 0;}

h1 {
   font-family: headings;
    letter-spacing: 0.08em;
    text-align: center;
}


h2 {
   font-size: clamp(2rem, 2.5vw, 3.5rem);
}
h3 {
   font-size: clamp(2rem, 2vw, 3.5rem);
}

h4 {
   font-size: clamp(1.5rem, 1.5vw, 3.5rem);
}
h5 {
   font-size: clamp(2rem, 1.75vw, 3.5rem);
    font-family: headings-light;
}
h2 {
    font-family: headings-light;
}


h3, h4{ font-family: headings;}

html {
    background-color: #000e0e;
}

body {
    color: #222222;
    font-family: superior_regular;
    margin: 0;
    font-size: clamp(1rem, 1.25vw, 2rem);
    background-color: #ffffff;
}

a {
    color: #222222;
    text-decoration: none;
}

a:hover {
    color: #c4c13a;
}

ul {
    margin: 0;
}

button {
    color: white;
    background-color: #222222;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin: 1rem;
    padding-left: 3rem;
    padding-right: 3rem;
    width: 600px;
    border-radius: 50px;
    box-shadow: none;
    border-style: none;
    border-color: none;
    border-width: none;
    font-family: headings-light;
    font-size: clamp(2rem, 1.75vw, 3.5rem);

}

button:hover {
    background-color: #c4c13a;
}


#header {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    width: 100%;
    align-content: baseline;
    margin-bottom: 1rem;
    background-color: #ffffff;!important;
    opacity: 1;
    z-index: 1;
    position: fixed;
    box-shadow: 0 0px 1px rgba(0,0,0,0.2);
}
#mainlogo {
    max-width: 65%;
    min-width: 120px;
    margin: .5rem 0 .5rem .5rem;
        grid-row: 1;
    grid-column: 1;
}
#mainlogo:hover {
    content: url('/static/images/2025-EjdLogo-CandyBar-Pea.svg');
}

#dsktp-navcontent {
    height: 4vw;
    grid-row: 1;
    grid-column: 2 / -1;
    width: 100%;
    align-content: center;
    font-family: headings-light;
}

.nav_header-m {
  display: none;
    grid-template-columns: 1fr 3fr 1fr;
    width: 100%;
    overflow-x: clip;
    align-content: center;
    margin-bottom: 1rem;
    background-color: #ffffff;!important;
    opacity: 1;
    z-index: 1;
    position: sticky;
    top: 0;
    box-shadow: 0 0px 1px rgba(0,0,0,0.2);
}

.m-logo {
    grid-column: 2/3;
    width: 75%;
    margin-bottom: 3vh;
    margin-top: 3vh;
    justify-self: center;
}
#mobile-overlay-menu {
    height: 100vh;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
     background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-1rem);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

#mobile-overlay-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mobile-hamburger {
    cursor: pointer;
}

#open_menu {
    display: grid;
    grid-template-columns: 70% 30%;
    grid-template-rows: auto 1fr;
    color: #FFFFFF;
    min-height: 100vh;
}

#open_menu .mobile-hamburger {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: 3vh;
}

.mobile-logo {
    justify-self: center;
}


.mobile-hamburger {
    grid-column: 3/4;
    justify-self: center;
    align-self: center;
    rotate: 15deg;
    height: clamp(28px, 5.76vh, 44px);
    aspect-ratio: 727.32 / 775.3;
    background-color: #ceca32;
    -webkit-mask: url('/static/images/hamburger-blk.svg') no-repeat center / contain;
    mask: url('/static/images/hamburger-blk.svg') no-repeat center / contain;
    cursor: pointer;
}

.mobile-hamburger:hover,
.mobile-hamburger:active {
    opacity: 75%;
}


#mobile {
    position: absolute;
    display:;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    color: #FFFFFF;
}

.mobile-links {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    transform: translateY(-15vh);
    text-align: center;
    color: #3d3d3d;
    font-family: headings, Helvetica, sans-serif;
    font-size: clamp(1.3rem, 6vw, 1.8rem);
    line-height: 200%;
    list-style: none;
    padding: 0;
}


.mobile-links a{
    color: #3d3d3d;
}

#dsktp {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    font-size: clamp(0.65rem, 1.4vw, 1.5rem);
    align-items: end;
    align-self: center;
    justify-self: stretch;
    justify-content: center;
    margin-top: .5rem;
}
#dsktp a {
    color: #b3b3b3;
    text-decoration: none;
}
#dsktp a:hover {
    color: #ceca32;
}
#dsktp a:active {
    color: #0095AD;
}

/* Homepage only: nav is transparent with white text over the hero and the
   logo is hidden; once scrolled past the hero (.scrolled, toggled in
   scripts.js) it turns solid and the logo fades in. */
.home-nav #header {
    background-color: transparent;
    box-shadow: none;
    transition: background-color 0.3s, box-shadow 0.3s;
}
.home-nav #dsktp a {
    color: #ffffff;
}
.home-nav #mainlogo {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
/* Logo is hidden up top, so let the nav use the full width and truly center.
   The logo link is taken out of the grid (absolute, overlaid left) so the nav
   stays a single row instead of pushing the logo onto a second one. */
.home-nav #dsktp-navcontent {
    grid-column: 1 / -1;
}
.home-nav #header > a {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}
.home-nav #mainlogo {
    width: clamp(11rem, 16vw, 16rem);
    max-width: none;
}
.home-nav.scrolled #header {
    background-color: #ffffff;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.2);
}
.home-nav.scrolled #dsktp a {
    color: #b3b3b3;
}
.home-nav.scrolled #mainlogo {
    opacity: 1;
    pointer-events: auto;
}

/* 631-768px: desktop nav still shows (mobile header starts at 630) — the
   default <ul> padding makes the gaps too wide, so tighten them. */
@media (max-width: 768px) {
    #dsktp ul {
        padding-left: 0;
        margin: 0;
    }
    #dsktp {
        gap: clamp(0.5rem, 2vw, 1.25rem);
    }
}

#index_cover {
    background-image: url("/static/images/Klytemnestra-Multicam30.jpg");
    background-position: right top;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Phones: scale the hero to the element (fixed attachment is buggy on iOS). */
@media (max-width: 630px) {
    #index_cover {
        background-attachment: scroll;
    }
}


#homepage_links {
    background-image: url("/static/images/ejd_2025_homepage_logo-v2.svg");
    background-repeat: no-repeat;
    grid-row: 2;
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    margin: 0;
}

.homepage_logo {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(9, 1fr);
    grid-template-rows: .75fr 1fr 1fr;
}
#logo-location{
    grid-row: 2/4;
    grid-column: 1/-1;
    width: 100%;
    height: auto;
}


#hero_nav {

}

#links {
    grid-column: 8/-1;
    grid-row: 2/4;
    font-size: clamp(1.5rem, 2vw, 3rem);
    color: #ffffff;
    line-height: 160%;
    bottom: 0;
    margin-left: -2rem;
    font-family: headings;
}

#homepage-upcoming {
    width: 100%;
    background-color: #ffffff;
    display: grid;
    grid-template-columns: 1fr 10fr 1fr;
    padding-bottom: 5rem;

}

.section_h1{
    grid-column: 1/-1;
    margin-bottom: 4rem;
    justify-self: center;
    color:#e8e8e8;
    font-size:clamp(1.3rem, 7.5vw, 9rem);
    letter-spacing:0.2em;
    white-space: nowrap;
    grid-column: 1/-1;
}

.section_h1_dark{
    color: #3d3d3d;
}

/* Responsive heading text: short variant only shows on narrow phones (<=450). */
.hdr-short { display: none; }

/* Homepage CTA links (VIEW ALL EVENTS/MEDIA, READ MORE). */
.cta-link {
    display: block;
    text-align: right;
    color: #b3b3b3;
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(2rem, 2.4vw, 3rem);
    letter-spacing: 2px;
    margin-top: 3rem;
    text-decoration: none;
}
.cta-link:hover {
    color: #0095AD;
}
.cta-link--read {
    color: #ceca3f;
}
@media (max-width: 630px) {
    .cta-link {
        text-align: center;
        font-size: clamp(1.3rem, 5vw, 2rem);
        margin-top: 2rem;
    }
}

.upcoming_events{
    grid-column: 2/3;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-gap: 1vw;
    justify-items: start;
   margin-left: 2rem;
}

.event_image{
grid-column: 1/2;
}

.event_image img {
    height: 90%;
    max-width: 95%;
    align-self: center;
}

.event_details {
    grid-column: 2;
    margin: 1rem;
    text-align: left;
    margin-left: 2rem;
}

.event_details h2 {
        color: #004951;
        letter-spacing: 3px;
}

.event_details h4 {
    margin-bottom: 1rem;
    font-family: headings;
    letter-spacing: 2px;
}

.event_details_DateTime {
    font-family: superior_medium;

}

.upcoming_ticket_img  {
    grid-column: 3;
    align-self: end;
}
.all_events_link {
    grid-column: 2/3;
    justify-self: end;
    color: #0095ad;
    margin-top: 5rem;
    max-width: 30%;
}

.read_more_link {
    grid-column: 2/4;
    justify-self: end;
    color: #0095ad;
    margin-top: 2rem;
    max-width: 35%;
}

#homepage_videos {
    background-color: #212121;
     display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    color: #fdffff;
        padding-top: 8rem;
    padding-bottom: 8rem;
    width: 100%;
}

.flex_2col {
    grid-column: 2/3;
    display: grid;
   grid-template-columns: 1fr 1fr;
    gap: 2rem;
    justify-content: center;
    text-align: center;
}

.flex_2col article {
max-width: 100%;
    justify-self: center;
}

.flex_2col article img {
    max-width: 100%;
    justify-self: center;
    margin-bottom: .5rem;
}

.flex_2col article cite{
  font-style: normal;
    color: #e5e4e4;
}

#view_all_media {
    grid-column: 2/3;
    grid-row: 3;
    justify-self: end;
    margin-top: 2rem;
    margin-bottom: 2rem;
    max-width: 34%;
}

.homepage_feature {
    width: 100%;
    max-height: fit-content;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr 1fr;
    padding-bottom: 8rem;
    padding-top: 5rem;
}

.homepage_feature_socials {
    width: 100%;
    max-height: fit-content;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: #ffffff;
}

.hv-wrap {
    grid-column: 1/-1;
    width: 80vw;
    margin: 4rem auto 0;
}
.feature-body {
    margin-top: 5rem;
}

.homepage_feature article {
    grid-column: 3;
    padding-bottom: 4rem;
    padding-top: 5rem;
    font-family: headings;
   font-size: clamp(1.5rem, 1.25vw, 2rem);
    margin-bottom: 1.5rem;
    text-align: center;
    grid-column: 2/4;
}

.homepage_feature cite {
    font-family: superior_medium;
    font-size: clamp(1rem, 1.25rem, 2vw);
    font-style: italic;
    margin-top: 1.5rem;
}

#homepage_elektra {
    background-image: url("/static/images/COElektra13_ambiguity.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #000000;
    color: white;
    height: 100vh;
    width: 100%;
}

#schedule_review {
    background-image: url("/static/images/mother-02.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: cover;
    background-color: #000000;
    color: white;
    height: 50vh;
    width: 100%;
}

#homepage_elektra article div {
    height: 0px;
}
#homepage_dido {
    background-image: url("/static/images/sorceressdido.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    height: 600px;
    color: #dadada;
}

#homepage_about{
   background-color: #fdffff;
    color: #dadada;
    max-width: 100vw;
    padding-top: 8rem;
    padding-bottom: 8rem;
}

#homepage_about article{
    max-height: 100%;
    width: 100%;
    align-content: center;
    color: #111111;
    grid-column: 2/4;
    font-family: superior_regular;
}
#homepage_about article p {
    margin-bottom: 1em;
}

#homepage_about article h1 {
    color: #e8e8e8;
    font-size: clamp(1.3rem, 7.5vw, 9rem);
    letter-spacing: 0.2em;
}
#homepage_about article h1 span {
    color: #e8e8e8;
}
/* Homepage mobile overrides live at the END of this file (search
   "MOBILE OVERRIDES") so they win on source order against the base
   ID rules scattered below. */
#homepage_contact {
      background-image: url("/static/images/homepage_about_dsktp.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    color: #dadada;
    height: 100vh;
    max-width: 100vw;
}

#homepage_socials{
   padding-top: 5rem;
   padding-bottom: 8rem;

}
#h1-1 {
    grid-row: 1;
    grid-column: 1/-1;
    font-family: headings, Helvetica, sans-serif;
    font-size: clamp(3.5rem, 7vw, 9rem) !important;
    letter-spacing: 0.2em;
    color: #cac8c2;
    text-align: center;
    padding-bottom: 5rem;
}

#socials_subtitle {
    grid-row: 3;
    grid-column: 1/-1;
    text-align: center;
    font-family: headings;
    font-size: clamp(1.5rem, 2.5vw, 3.5rem);
    letter-spacing: 0.2em;
    color: #cac8c2;
    margin-top: 5rem;
}

#homepage_socials img {
    max-width: 10vw;
    opacity: 0.5;
    transition: opacity 0.15s;
}
#homepage_socials img:hover {
    opacity: 1;
}

#homepage_socials {
    justify-items: center;
        
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.wiesenbackground{
    
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 800px;
}
.socials-icon-row {
    grid-row: 2;
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
}

#socials_insta, #socials_facebook, #socials_youtube, #socials_tiktok, #socials_email {
    width: clamp(48px, 7vw, 75px);
    height: auto;
    display: block;
}

#h1-2 {
    grid-row: 3;
    grid-column: 1/-1;
    margin-bottom: 2rem;
    color: #b3b3b3;
    font-family: headings-light;
    font-size: clamp(1rem, 1.3vw, 1.8rem);
    letter-spacing: 2px;
    text-align: center;
    width: 100%;
    max-width: 480px;
    font-weight: normal;
}

#footer{
    background-color: #000e0e;
    padding: 4rem 3vw;
    color: #ceca32;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

#footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: end;
    align-self: start;
    margin-right: 3vw;
}

#footer-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    justify-self: start;
    align-self: start;
}

#footersocials{
    grid-column: 2/3;
}

.ftr_socials {
    width: 36px;
    height: 36px;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.ftr_socials:hover {
    opacity: 1;
}

#footerlogo {
    width: 300px;
    max-width: 100%;
    margin: 0;
}
#footertext {
    grid-column: 1 / -1;
    text-align: center;
    padding-top: 3rem;
    color: #b3b3b3;
    font-family: headings-light;
    font-size: clamp(0.7rem, 0.85vw, 0.95rem);
    letter-spacing: 1px;
}

#footertext a {
    color: #b3b3b3;
}

/* Ovrtre footer watermark (based on Magdalena's stylesheet), tinted Rain. */
.footerstuff {
    text-align: center;
    color: #b3b3b3;
    margin-left: 0;
    margin-right: 0;
    margin-top: 3rem;
}
.ovrtre_watermark {
    margin-top: 5vw;
    margin-bottom: 3rem;
    opacity: 0.5;
}
/* Uses a Rain-recoloured copy of the logo (ovrtrelogo_footer_rain.svg).
   15% larger than the 1.5rem base, with a 1rem gap above the text. */
.ovrtre_footer {
    display: block;
    height: 1.725rem;
    width: auto;
    margin: 0 auto 1rem;
}


.socialgrid {
    display: flex;
    gap: 1rem;
}

#footersocials{

}

#flex_parent_footer {
    display: flex;
    gap: 1rem;
    flex-wrap: nowrap;
}

.pagetitles {
    font-size: clamp(2.5rem, 11vw, 11rem);
    margin: 0;
    color: #e8e8e8;
}

/* Long page titles (WATCH & LISTEN, PAST PERFORMANCES) -- size to fill one
   line so they never overflow on small screens. */
.pagetitles-fit {
    font-size: clamp(1.5rem, 7.5vw, 9rem);
    white-space: nowrap;
}

.repertoire-title {
    color: #e8e8e8;
    padding: 2rem 0;
}

.second-title {
    font-size: clamp(1.5rem, 7.8vw, 9rem) !important;
    letter-spacing: 0.1em;
    white-space: nowrap;
    margin: 2rem 0;
    color: #e8e8e8;
}

/* ── Classes extracted from former inline styles ───────────────────── */

/* Page title in the yellow-green brand colour (about page name line). */
.about-name { color: #ceca3f; }

/* Full-width homepage feature row (mini-calendar / videos / bio wrappers). */
.feature-fullrow { grid-column: 1 / -1; margin: 0 10vw; }

/* Photo band with a fixed 65vh height. */
.contact-photo-band.band-65 { height: 65vh; }

/* Footer legal links inherit the surrounding colour. */
.footer-legal-link { color: inherit; text-decoration: none; }

/* Newsletter language-preference row. */
.lang-pref-row {
    grid-column: 1 / -1;
    display: flex;
    gap: 2rem;
    align-items: center;
    margin-top: 0.5rem;
}
.lang-pref-label {
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(0.75rem, 0.9vw, 1rem);
    color: #b3b3b3;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.lang-pref-option {
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(0.75rem, 0.9vw, 1rem);
    color: #b3b3b3;
    cursor: pointer;
    text-transform: none;
    letter-spacing: normal;
}
.lang-pref-option input { margin-right: 0.3rem; }
.newsletter-msg { display: none; margin-top: 1rem; font-family: headings-light, Helvetica, sans-serif; }

/* Impressum contact section sits flush to the title above it. */
.section-flush-top { padding-top: 0; }

/* Role colours in the schedule / mini-calendar role lists. */
.role-carmen { color: #940035; }
.role-purple { color: #440462; }
.role-erda   { color: #03491d; }


.navheight {
    height: 8vh;
}
.margins{
    margin-top: 3rem;
    margin-left: 15vw;
    margin-right: 15vw;
    padding-bottom: 3rem;
}

.mainimage{
    max-width: 100%;
    margin-bottom: 8vh;
}

.fontcolor-yellowgreen{ color: #ceca32;}

.about-page-wrap {
    background-color: #ffffff;
}

.aboutpage {
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}

#media_page{
    grid-template-columns: 1fr 3fr 1fr;
    background-color: #ffffff;
}

/* ── Video grid ── */
.media-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    width: 80vw;
    margin: 0 auto;
}
.media-thumb { cursor: pointer; position: relative; }
.media-thumb img { width: 100%; display: block; box-shadow: 0 0px 5px rgba(0,0,0,0.25); }
.media-thumb:hover img { box-shadow: none; }
.media-thumb p {
    font-family: headings-light;
    font-size: clamp(0.85rem, 1vw, 1.1rem);
    color: rgba(171,171,171,1);
    margin-top: 0.5rem;
    text-align: center;
}

.media-blocks-container {
    --gallery-width: 68vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 80vw;
    margin: 0 auto;
    column-gap: 4rem;
    row-gap: 7rem;
    padding: 4rem 0;
}

/* As the viewport narrows the paired videos shrink faster than a flat-vw
   gallery would, so the gallery starts to dominate. Step the gallery width
   down through the narrower desktop range to keep them balanced. */
@media (min-width: 1051px) and (max-width: 1500px) {
    .media-blocks-container { --gallery-width: 60vw; }
}

.media-gallery-block {
    grid-column: 1 / -1;
}

/* Media Page Feature: a single video shown full width at the top. As a
   full-width grid item it shares the container's row-gap rhythm. */
.media-feature {
    grid-column: 1 / -1;
}

/* Desktop ordering: videos pair up (VV), each pair followed by one gallery.
   Mobile keeps natural DOM order (V G V G). */
@media (min-width: 1051px) {
    /* A video alone on its row stretches to 20% wider than the gallery,
       capped at the container width so it never overflows. */
    .media-video-solo {
        grid-column: 1 / -1;
        width: min(80vw, calc(var(--gallery-width) * 1.2));
        justify-self: center;
    }
    .media-ord-0 { order: 0; }
    .media-ord-1 { order: 1; }
    .media-ord-2 { order: 2; }
    .media-ord-3 { order: 3; }
    .media-ord-4 { order: 4; }
    .media-ord-5 { order: 5; }
    .media-ord-6 { order: 6; }
    .media-ord-7 { order: 7; }
    .media-ord-8 { order: 8; }
    .media-ord-9 { order: 9; }
    .media-ord-10 { order: 10; }
    .media-ord-11 { order: 11; }
    .media-ord-12 { order: 12; }
    .media-ord-13 { order: 13; }
    .media-ord-14 { order: 14; }
    .media-ord-15 { order: 15; }
    .media-ord-16 { order: 16; }
    .media-ord-17 { order: 17; }
    .media-ord-18 { order: 18; }
    .media-ord-19 { order: 19; }
}

/* ── Photo gallery grid ── */
.photo-gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    width: var(--gallery-width, 68vw);
    margin: 0 auto;
}
.pg-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    background: #1a1a1a;
}
.pg-item.pg-full { grid-column: 1 / -1; aspect-ratio: 16/10; }
.pg-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pg-item .pg-label {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 1.25rem 1.5rem 1rem;
    background: none;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
    font-family: headings;
    font-size: clamp(1.1rem, 1.6vw, 2rem);
    color: #fff;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: right;
    transform: translateY(0);
    transition: transform 0.3s ease;
}
.pg-item:not(.pg-single):hover .pg-label { transform: translateY(-6px); }
.pg-item.pg-single { cursor: default; }
.pg-arrow { margin-left: 0.5rem; font-style: normal; }

/* ── Video modal ── */
.vid-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;
}
.vid-modal.open { display: flex; }
.vid-caption {
    position: relative;
    z-index: 1;
    max-width: min(1200px, 80vw);
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(0.95rem, 1.3vw, 1.3rem);
    color: #3d3d3d;
    text-align: center;
}
.vid-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(232,232,232,0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.vid-box {
    position: relative;
    z-index: 1;
    width: min(1200px, 80vw);
    aspect-ratio: 16/9;
}
.vid-box iframe { width: 100%; height: 100%; border: none; }

/* ── Photo lightbox ── */
body.lightbox-open {
    overflow: hidden;
}

.photo-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(232,232,232,0.85);
}
.photo-lightbox.open { display: flex; flex-direction: column; }
.plb-main {
    order: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    flex: 0 0 auto;
    padding: 5rem 5vw 0.5rem;
    overflow: hidden;
}
.plb-main-img { max-width: 100%; max-height: 60vh; object-fit: contain; }
.plb-sidebar {
    order: 2;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    padding: 0.5rem 5vw 1.5rem;
    justify-content: center;
    align-content: flex-start;
    overflow-y: auto;
    background: none;
}
.plb-sidebar::-webkit-scrollbar { width: 3px; }
.plb-sidebar::-webkit-scrollbar-thumb { background: #3d3d3d; }
.plb-thumb,
.plb-thumb.lb-landscape {
    width: 108px;
    aspect-ratio: 1;
    object-fit: cover;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s;
    display: block;
}
.plb-thumb:hover { opacity: 0.8; }
.plb-thumb.active { opacity: 1; outline: 2px solid #3d3d3d; outline-offset: -2px; }
.plb-header {
    position: fixed;
    top: 1.5rem;
    left: 0;
    right: 0;
    z-index: 1;
    text-align: center;
    font-family: headings;
    font-size: clamp(1.1rem, 2vw, 2rem);
    color: #3d3d3d;
    letter-spacing: 3px;
    text-transform: uppercase;
    pointer-events: none;
}
.plb-caption {
    margin-top: 1rem;
    font-family: headings-light;
    font-size: clamp(0.85rem, 1vw, 1.1rem);
    color: #b3b3b3;
    text-align: center;
}

@media (max-width: 1050px) {
    .media-grid { grid-template-columns: 1fr; }
    .media-blocks-container { grid-template-columns: 1fr; }
}

#mainvideos {

    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-left: 13vw;
    margin-right: 13vw;
    margin-top: 5rem;
    margin-bottom: 3rem;
    grid-gap: 2vw;

}

#mainvideos article img{
    width: 90%;
}

.hero_header {
    width: 100%;
}

.contact-page-title {
    color: #e8e8e8;
    line-height: 1;
}

.contact-page {
    max-width: 1000px;
    margin: 1rem auto 6rem;
    padding: 0 6vw;
}

.contact-directory {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0;
}

.contact-directory-item {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.contact-directory-label {
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(0.75rem, 0.9vw, 1rem);
    color: #b3b3b3;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    width: 80px;
    flex-shrink: 0;
}

.contact-directory-value {
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    color: #3d3d3d;
    text-decoration: none;
    letter-spacing: 0.02em;
}

.contact-directory-value:hover {
    color: #0095AD;
}

.contact-directory-socials {
    display: flex;
    gap: clamp(1rem, 2vw, 2rem);
    align-items: center;
}

.contact-directory-socials--centered {
    justify-content: center;
    width: 100%;
}

.contact-directory-socials img {
    width: clamp(44px, 6vw, 64px);
    height: auto;
}

.contact-form-section {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-form-section .homepage-contact-form {
    max-width: 100%;
}

.contact-form-section h2 {
    margin-top: 5rem;
    margin-bottom: 0.8rem;
    text-align: center;
    color: #3d3d3d;
    font-family: superior_regular, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

.contact-photo-band {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #000000;
}

@media (max-width: 1400px) {
    .contact-photo-band { height: 80vh; }
}

@media (max-width: 1100px) {
    .contact-photo-band { height: 65vw; }
}

@media (max-width: 768px) {
    .contact-photo-band { height: 60vw; }
}

/* Retina / HiDPI — match by CSS pixel width, not physical */
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 1400px),
       (min-resolution: 192dpi) and (max-width: 1400px) {
    .contact-photo-band { height: 70vh; }
}

.contact-photo-band img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Show the left of this specific band photo instead of the center crop. */
.contact-photo-band img.band-left {
    object-position: left;
}

/* Piano band: she sits left-of-center, so shift the crop to center her. */
.contact-photo-band img.band-piano {
    object-position: 35% center;
}

.contact-photo-band.band-tall { height: 100vh; }
/* Under 450 all the photo bands share one height (matching the bench band). */
@media (max-width: 450px) {
    .contact-photo-band,
    .contact-photo-band.band-tall { height: 70vh; }
}

.contact-newsletter-section {
    background: linear-gradient(#29013c, #1c0128);
    padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 8vw, 10rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-newsletter-section #embedform {
    width: 100%;
    max-width: 560px;
    align-items: center;
    text-align: center;
    color: #e8e8e8;
}

.contact-newsletter-section #embedform h4 {
    text-align: center;
}

.contact-newsletter-section #embedform form {
    max-width: 100%;
}

.contact-newsletter-section #embedform input#submitEmail {
    width: 100%;
    justify-self: stretch;
    background: #440462;
    border: 1px solid #440462;
    color: #e8e8e8;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.contact-newsletter-section #embedform input#submitEmail:hover {
    background: #e8e8e8;
    border-color: #440462;
    color: #440462;
}

#linktree {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: stretch;
    align-items: center;
    gap: 1rem;
    max-width: 40rem;
    margin: 0 auto 5rem;
}

.linktree-title {
    color: #b3b3b3;
    text-align: center;
    margin: 3rem auto;
}

.more-ways-title {
    color: #75647d;
    width: 100%;
    margin: 0 auto 2rem;
    white-space: nowrap;
    font-size: clamp(1rem, 6vw, 5rem);
}

.linktree-news-socials #embedform input#submitEmail {
    background: #75647d;
    border-color: #75647d;
    font-size: clamp(0.9rem, 1.08vw, 1.2rem);
    padding: 0.6rem 2.4rem;
}
.linktree-news-socials #embedform input#submitEmail:hover {
    background: #e8e8e8;
    color: #75647d;
    border-color: #75647d;
}

.linktree-more-videos {
    display: block;
    text-align: center;
    font-family: headings, Helvetica, sans-serif;
    font-size: clamp(1.4rem, 2vw, 2.2rem);
    letter-spacing: 1px;
    color: #b3b3b3;
    margin: 0 auto 5rem;
}
.linktree-more-videos:hover {
    color: #ceca32;
}
.linktree-more-videos .lmv-arrow {
    margin-left: 0.4rem;
}

.linktree-feature-video {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    width: 80vw;
    margin: 0 auto 5rem;
}

.linktree-feature-video--pair {
    grid-template-columns: 1fr 1fr;
    width: min(60rem, 90vw);
}

.linktree-feature-video .media-thumb {
    display: block;
}

.linktree-feature-video .lfv-cover {
    display: block;
    position: relative;
}

/* Bigger, rain-colored caption on the linktree only. */
.linktree-feature-video .media-thumb p {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
    color: #b3b3b3;
}

/* Play-button overlay (centered on the image only) so mobile users can tell
   it's a video. */
.linktree-feature-video .lfv-cover::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(3.5rem, 7vw, 5.5rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(27, 27, 27, 0.55);
    z-index: 1;
    pointer-events: none;
}
.linktree-feature-video .lfv-cover::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-38%, -50%);
    border-style: solid;
    border-width: clamp(0.8rem, 1.6vw, 1.2rem) 0 clamp(0.8rem, 1.6vw, 1.2rem) clamp(1.3rem, 2.6vw, 2rem);
    border-color: transparent transparent transparent #ffffff;
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 600px) {
    .linktree-feature-video--pair {
        grid-template-columns: 1fr;
    }
}

#linktree button {
    width: 100%;
    font-size: clamp(1rem, 2.5vw, 1.5rem);
    padding: 0.9rem 2.5rem;
    margin: 0;
}

/* Purple newsletter band on the linktree: newsletter left, socials right. */
.linktree-news-socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(3rem, 6vw, 6rem) 0;
}

.linktree-news-socials .ln-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2rem, 6vw, 8rem);
    row-gap: 2rem;
    align-items: start;
    width: 80vw;
}

.linktree-news-socials .ln-newsletter,
.linktree-news-socials .ln-socials {
    max-width: none;
}

.linktree-news-socials .ln-newsletter {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Let the newsletter fill its column instead of the narrow 480px cap. */
.linktree-news-socials #embedform,
.linktree-news-socials #embedform form,
.linktree-news-socials #embedform h4 {
    max-width: 100%;
    width: 100%;
}

.linktree-news-socials .ln-socials {
    margin-top: 3rem;
}

/* Stack the socials under the newsletter on narrower screens. */
@media (max-width: 915px) {
    .linktree-news-socials {
        padding-top: 5rem;
        padding-bottom: 0;
    }
    .linktree-news-socials .ln-columns {
        grid-template-columns: 1fr;
        width: 100%;
        row-gap: 0;
    }
    /* Two stacked full-width blocks with distinct backgrounds. */
    .linktree-news-socials .ln-newsletter {
        width: 100%;
        box-sizing: border-box;
        padding: 0 10vw clamp(3rem, 8vw, 4rem);
    }
    .linktree-news-socials .ln-socials {
        margin-top: 0;
        width: 100%;
        box-sizing: border-box;
        padding: 0 10vw clamp(6rem, 14vw, 9rem);
    }
    .linktree-news-socials .ln-columns #h1-2,
    .linktree-news-socials .ln-columns .ln-socials h3 {
        font-size: clamp(1.8rem, 5.5vw, 3.2rem);
    }
    .linktree-news-socials #linktree_socials #contact-side {
        row-gap: clamp(2rem, 6vw, 3.5rem);
    }
}

.linktree-news-socials .ln-socials h3 {
    color: #c4c0b9;
    font-family: headings;
    font-weight: normal;
    letter-spacing: normal;
    font-size: clamp(1.6rem, 2.2vw, 2.6rem);
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

/* Unify the newsletter title with the "Follow Me" heading: bold headings
   font instead of the thin letter-spaced headings-light default. */
.linktree-news-socials #h1-2 {
    font-family: headings;
    font-weight: normal;
    letter-spacing: normal;
    color: #c4c0b9;
    font-size: clamp(1.6rem, 2.2vw, 2.6rem);
    line-height: 1;
    text-align: center;
    max-width: none;
}

@media (max-width: 768px) {
    #linktree {
        grid-template-columns: 1fr;
    }
}

#linktree_socials #contact-side {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: center;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    aspect-ratio: auto;
}

#linktree_socials #contact-side h3 {
    text-align: center;
}

#linktree_socials .socials-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

#linktree_socials .socials-row img {
    opacity: 0.5;
    transition: opacity 0.15s;
}
#linktree_socials .socials-row img:hover {
    opacity: 1;
}

#linktree_socials #contact-side img {
    width: 4rem;
}



#contact-side {
    display: flex;
    flex-direction: column;
    justify-items: center;
}

#contact-side img {
    max-width: 15vw;
}
/* === SHARED FORM STYLES === */
form {
  width: 100%;
  display: grid;
  gap: 1rem;
}

fieldset {
  border: none;
  padding: 0;
}

input,
textarea {
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px;
  border-color: #9d9d9d;
  font-family: superior_regular;
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  color: #3d3d3d;
}

input:focus,
textarea:focus {
  border-color: #ceca32;
  outline-offset: 2px;
}

label {
  font-family: headings-light, Helvetica, sans-serif;
  font-size: clamp(0.75rem, 0.9vw, 1rem);
  color: #b3b3b3;
  text-align: left;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* === TEXTAREA FIXED SIZE === */
textarea {
  width: 100%;
  height: 150px;
  resize: none;
}

/* === EMBED FORM STYLES === */
#embedform {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 3rem;
}

#embedform h4 {
  text-align: left;
  margin-bottom: 2rem;
  max-width: 480px;
  color: #b3b3b3;
  font-family: headings-light;
  font-size: clamp(0.85rem, 1vw, 1.1rem);
  font-weight: normal;
  letter-spacing: 1px;
}

#embedform form {
  max-width: 480px;
  width: 100%;
}

.form_alignment {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.6rem 1rem;
  align-items: center;
}

#contactform .form_alignment {
  grid-template-columns: 1fr;
  gap: 0.3rem;
  row-gap: 1.2rem;
}

#contactform .form_alignment label {
  margin-bottom: 0;
}

#contactform .form_alignment input,
#contactform .form_alignment textarea {
  width: 100%;
  box-sizing: border-box;
  border-color: #b3b3b3;
}

#footerembed {
  width: 100%;
}

#footerembed input#submitEmail {
  width: 100%;
}

#embedform label[for="id_namesubmit"],
#embedform label[for="id_email"] {
  font-family: headings-light;
  font-size: clamp(0.75rem, 0.9vw, 1rem);
  color: #b3b3b3;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
}

#embedform input[type="text"],
#embedform input[type="email"] {
  background: none;
  border: none;
  border-bottom: 1px solid #9d9d9d;
  border-radius: 0;
  font-family: headings-light;
  font-size: clamp(0.85rem, 1vw, 1.1rem);
  color: #3d3d3d;
  padding: 0.4rem 0;
  width: 100%;
}

#embedform input[type="text"]:focus,
#embedform input[type="email"]:focus {
  outline: none;
  border-bottom-color: #0095AD;
}

#embedform input#submitEmail {
  background: none;
  border: 1px solid #3d3d3d;
  border-radius: 50px;
  color: #b3b3b3;
  font-family: headings-light;
  font-size: clamp(0.75rem, 0.9vw, 1rem);
  letter-spacing: 2px;
  padding: 0.5rem 2rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  grid-column: 1/-1;
  margin-top: 1rem;
}

#embedform input#submitEmail:hover {
  border-color: #0095AD;
  color: #0095AD;
}

/* === CHECKBOX STYLES === */
.checkbox_group {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.5rem;
}

#consent_styles {
  color: #b3b3b3;
  text-align: left;
  font-family: headings-light;
  font-size: clamp(0.7rem, 0.85vw, 0.95rem);
  letter-spacing: 0.5px;
}

#email_consent {
  appearance: none;
  height: 1rem;
  width: 1rem;
  min-width: 1rem;
  border: 1px solid #3d3d3d;
  border-radius: 2px;
  cursor: pointer;
  margin-top: 0.15rem;
}

#email_consent:checked {
  background-color: #0095AD;
  border-color: #0095AD;
}

/* CONTACT FORM: Label & Focus */
#contactform {
    margin-top: 3rem;
}

#contactform label {
  color: #b3b3b3;
}

#contactform  input:focus,
#contactform  textarea:focus {
  border: 2px solid #ceca32;
  outline: none;
}

/* CONTACT FORM: Submit Button Styling */
#contactbutton {
  background: none;
  border: 1.5px solid #1b1b1b;
  border-radius: 100px;
  padding: 0.6rem 2.5rem;
  font-family: headings-light, Helvetica, sans-serif;
  font-size: clamp(0.85rem, 1vw, 1rem);
  letter-spacing: 0.15em;
  color: #1b1b1b;
  cursor: pointer;
  grid-column: 1 / -1;
  justify-self: stretch;
  margin-top: 1rem;
  transition: background 0.15s, color 0.15s;
}

#contactbutton:hover {
  background: #1b1b1b;
  color: #ffffff;
}
input[type="submit"] {
  justify-self: start;
}
#contact-side {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
    grid-gap: 0;
  max-width: 80%; /* optional: controls size */
  margin: 0 auto;   /* center if needed */
    aspect-ratio: 1;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

#contact-side img {
  width: 100%;
  height: auto;
  display: block;
    margin: 0;
}



label span {
  display: none;
}

label span:lang(en) {
  display: inline;
}

html:lang(de) label span:lang(de),
html:lang(es) label span:lang(es) {
  display: inline;
}

.grid-contact .embed-wrapper {
  grid-column: 1 / -1;
  width: 80%;
  justify-self: center;
  margin-top: 3rem;
  margin-bottom: 5rem;
  padding: 3rem 0;
  border-top: 1px solid #e6e3dd;
}

.grid-contact .homepage_feature {
    grid-column: 1/-1;
}

#contact-upcoming {
    display: flex;
    flex-direction: row;
    justify-content: start;
    justify-items: start;
}



#contact-upcoming .event_cards {
  background: none;
  color: #3d3d3d;
  border-radius: 0;
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

#contact-upcoming .event_cards .upcoming_events {
  display: flex;
  flex-direction: column;
  align-items: center; /* centers children horizontally */
  text-align: center;    /* centers text */
  gap: 1rem;             /* space between elements */
  max-width: 100%;      /* optional max width for the card */
  margin: 0 auto;        /* center the card itself if needed */
  padding: 1rem;
  border: 1px solid #ddd; /* optional styling */
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  box-sizing: border-box;
    justify-items: center;
}

#contact-upcoming .event_cards H2 {
  color: #929090;
}

#contact-upcoming .event_cards .upcoming_ticket_img {
    display: none;
}

#contact-upcoming .event_image {
  grid-column: auto !important; /* disables grid positioning */
  align-self: center; /* centers in flex column */
  max-width: 100%;
  width: 80%;
}

#contact-upcoming .event_image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

#contact-socials-mobile{
    display: none;
}


.right-align {
    text-align: right;
    margin-top: 3rem;
    margin-bottom: 3rem;
    color: #939292;
}

.right-align a {
    text-align: right;
    margin-top: 3rem;
    margin-bottom: 3rem;
    color: #939292;
}

.right-align a:hover {
    text-align: right;
    margin-top: 3rem;
    margin-bottom: 3rem;
    color: #0093a1;
}

.center-this {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
    color: #939292;
    font-size: clamp(1.1rem, 2.5vw, 1.8rem);
}

.center-this a {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
    color: #939292;
}

.center-this a:hover {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
    color: #0093a1;
}


.cvyear {
    font-family: Headings;
    margin-right: 0;
    color: rgba(171, 171, 171, 0.68);
    background-color: #e7e7e7;
    padding:1rem;
    margin-bottom: 1.5rem;

}
.add-left-margin {
    margin-left: 6vw;
}
.schedule-main {
    margin-left: 10vw;
    margin-right: 10vw;
    background-color: #ffffff;
}

@media (max-width: 450px) {
    .schedule-main {
        margin-left: 1rem;
        margin-right: 1rem;
    }
}

.schedule {
    margin-left: 10vw;
    margin-right: 10vw;
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    color: rgba(171, 171, 171, 1);
    margin-top: 1rem;
    margin-bottom: 1rem;

}
.darktext {
    color: #2a2a2a;
}
#about_image {
    background-image: url("/static/images/UlricaScreenshot.png");
    background-repeat: no-repeat;
    background-position: center left;
    background-size: cover;
       background-color: #000000;
    color: white;
    height: 50vh;
    width: 100%;
}

.rep-grid{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    align-self: center;
    margin-bottom: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: left;
}

.rep-parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    column-gap: 5rem;
    margin-left: 10vw;
    margin-right: 10vw;
}

#contact-linktree {
    background: #008296;
    background: linear-gradient(180deg,rgba(0, 130, 150, 1) 0%, rgba(18, 62, 76, 1) 82%);
    padding: 5vw;
    width: 100%;

}
#linktree-form {
    width: 60%;
}













/*======MEDIA QUERIES =====*/
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

@media (max-width: 1400px) {
  .grid-contact {
    grid-template-columns: 1fr 1fr;
  }

    button{
    width: 400px
    }
}
}


@media (max-width: 950px) {
  .contact-hero-wrap {
    grid-template-columns: 1fr;
  }
  .contact-hero-img {
    height: 45vw;
    min-height: 260px;
  }
  .contact-secondary {
    grid-template-columns: 1fr;
    padding: 8vw 8vw;
    gap: 2rem;
  }
    #contact-main {
    max-width: 100%;
}
    #homepage_socials {
    justify-items: center;
        background-image: none;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

    #contact-upcoming {
        flex-direction: column;
        gap: 1rem;
    }

}


{@media (max-width: 768px) {
  #contact-upcoming {
    flex-direction: column;
    align-items: center; /* optional: center the stacked cards */
  }

  #contact-upcoming .event_cards {
    margin: 1rem 0; /* stack spacing */
    width: 90%;     /* optional: fit smaller screens */
  }

  #contact-upcoming .event_cards .upcoming_events {
    max-width: 100%;
    padding: 1rem;
  }

  #contact-upcoming .event_image {
    width: 100%;
      max-height: 20vh;
  }

  #contact-upcoming .event_image img {
    width: 100%;
        max-height: 20vh;
  }

}
}
@media (max-width: 630px) {
  #header { display: none; }
  .nav_header-m { display: grid; }
  .navheight { height: 0; }
}
@media (max-width: 768px) {
  #footer {
    grid-template-columns: 1fr;
    padding: 3rem 6vw;
  }
  #footer-left, #footer-right {
    justify-self: center;
    align-self: auto;
    margin-right: 0;
    align-items: center;
    width: 100%;
  }
  #footer-right {
    align-items: center;
  }
  #footerembed,
  #footerembed #embedform {
    align-items: center;
    text-align: center;
  }
  #footerembed #embedform form {
    margin-left: auto;
    margin-right: auto;
  }
  #footertext {
    text-align: center;
  }
}

/* Homepage contact section */
#homepage_contact_form {
    background-color: #ffffff;
    padding: 5rem clamp(2rem, 10vw, 16rem);
    display: flex;
    flex-direction: column;
    align-items: center;
}
.homepage-contact-h1 {
    color: #e8e8e8;
    font-size: clamp(1.3rem, 7vw, 9rem) !important;
    letter-spacing: 0.2em;
    font-family: headings, Helvetica, sans-serif;
    text-align: center;
    margin-bottom: 3rem;
}
.homepage-contact-form {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.hcf-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.hcf-field label {
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(0.8rem, 1vw, 1rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #3d3d3d;
}
.hcf-input {
    border: 1px solid #3d3d3d;
    background: transparent;
    box-sizing: border-box;
    padding: 0.5rem 0;
    font-family: superior_regular, Helvetica, sans-serif;
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
    color: #3d3d3d;
    outline: none;
    width: 100%;
}
.hcf-input:focus {
    border-bottom-color: #3d3d3d;
}
.hcf-textarea {
    resize: vertical;
    min-height: 120px;
}
.hcf-consent {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}
.hcf-consent label {
    text-transform: none;
    letter-spacing: normal;
    font-size: clamp(0.8rem, 1vw, 0.9rem);
}
.hcf-submit {
    align-self: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: 0.5rem;
    background: none;
    border: 1.5px solid #1b1b1b;
    border-radius: 100px;
    padding: 0.6rem 2.5rem;
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(0.85rem, 1vw, 1rem);
    letter-spacing: 0.15em;
    color: #1b1b1b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.hcf-submit:hover {
    background: #1b1b1b;
    color: #ffffff;
}
.hcf-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 3rem 0;
}
.hcf-smile {
    width: 140px;
    height: 140px;
}
.hcf-success p {
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.4rem);
    letter-spacing: 0.1em;
    color: #3d3d3d;
    margin: 0;
}
.hcf-send-another {
    font-family: headings-light, Helvetica, sans-serif;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    letter-spacing: 0.08em;
    color: #b3b3b3;
    text-decoration: none;
}
.hcf-send-another:hover {
    color: #3d3d3d;
}

/* Blog (shared templates, themed per site). EJD: ghost headings, superior body. */
.blog-post,
.blog-list {
    max-width: 50rem;
    margin: 0 auto;
    padding: 0 5vw 5rem;
}
.blog-title {
    font-family: headings;
    color: #e8e8e8;
    font-size: clamp(2.5rem, 8vw, 6rem);
    margin: 1rem 0 0.5rem;
}
.blog-date {
    font-family: headings-light, Helvetica, sans-serif;
    color: #b3b3b3;
    letter-spacing: 0.08em;
}
.blog-body {
    font-family: headings-light, Helvetica, sans-serif;
    color: #2a2a2a;
    font-size: clamp(1rem, 1.2vw, 1.3rem);
    line-height: 1.6;
}
.blog-hero {
    width: 100%;
    height: auto;
    margin: 0 0 1.5rem;
}
.blog-body img {
    max-width: 100%;
    height: auto;
}
.blog-list-item {
    border-bottom: 1px solid #e8e8e8;
    padding: 1.25rem 0;
}
.blog-list-title {
    font-family: headings;
    color: #2a2a2a;
    font-size: clamp(1.5rem, 3vw, 2.4rem);
    margin: 0;
}
.blog-back {
    font-family: headings-light, Helvetica, sans-serif;
    color: #b3b3b3;
    text-decoration: none;
}

/* Performance history grid */
#ph-grid                              { margin: 0 0 4rem; }
.ph-section-title                     { font-family: headings; color: #b3b3b3; font-size: clamp(1.5rem, 3vw, 2.6rem); letter-spacing: 0.04em; margin: 3rem 0 1.25rem 10vw; }
#ph-grid .ph-section-title:first-child { margin-top: 0; }
/* Chorus + program rows: no role column. */
.ph-row-3                             { grid-template-columns: 1.5fr 1fr 1fr; }
.ph-flat .ph-row                      { padding-left: 10vw; padding-right: 10vw; }
.ph-year                              { font-family: headings; color: rgba(171,171,171,0.68); background-color: #e7e7e7; padding: 0.6rem 1rem; margin-bottom: 1.5rem; margin-top: 1.5rem; font-size: clamp(1rem, 1.3vw, 1.5rem); }
.ph-year-group                        { margin-bottom: 1rem; }
.ph-row                               { display: grid; grid-template-columns: 1.5fr 1.5fr 1fr 1fr; gap: 1rem; padding: 0.5rem 0 0.5rem 1rem; font-size: clamp(1rem, 2vw, 1.4rem); }
.ph-year-group .ph-row:not(:last-child) { border-bottom: 1px solid #e8e8e8; }
.ph-flat .ph-row:nth-child(even)      { background-color: #f1f1f1; }
.ph-role                              { color: #2a2a2a; font-family: headings; }
.ph-org                               { color: #2a2a2a; font-family: headings-light; }
.ph-work                              { color: #2a2a2a; font-family: headings; }
.ph-composer                          { color: rgba(171,171,171,1); }

/* Phone: past-performances CV drops the place and shows work/org/role
   on one line. */
@media (max-width: 630px) {
    .ph-row {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "work org role";
        gap: 0.5rem;
        padding: 0.5rem 3vw 0.5rem 10vw;
        font-size: clamp(0.85rem, 2.4vw, 1.15rem);
    }
    .ph-work { grid-area: work; }
    .ph-org { grid-area: org; }
    .ph-role { grid-area: role; }
    .ph-flat .ph-row {
        padding-left: 10vw;
        padding-right: 3vw;
    }
    .ph-composer {
        display: none;
    }
}

/* Narrow phones: symmetric 3rem side padding so the CV grid is centered. */
@media (max-width: 400px) {
    .ph-row,
    .ph-flat .ph-row {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

/* ============================================================
   MOBILE OVERRIDES — kept at the very end of the file so they
   win on source order against the base ID rules above (media
   queries add no specificity, so ties are broken by order).
   ============================================================ */
@media (max-width: 630px) {
    .homepage_feature article {
        font-size: clamp(1rem, 3.8vw, 1.25rem);
    }
    /* Fill more width, and offset the trailing letter-spacing so the
       text sits visually centered instead of shifted left. */
    .section_h1 {
        font-size: clamp(1.3rem, 8vw, 9rem);
        margin-bottom: 2rem;
        padding-left: 0.2em;
    }
    /* Tighten the huge section padding that boxes each heading in. */
    #homepage_videos,
    .homepage_feature,
    #homepage_about {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .homepage_feature article {
        padding-top: 0;
        padding-bottom: 0;
    }
    .hv-wrap,
    .feature-body {
        margin-top: 0;
    }
    /* The review quote is longer text — keep it smaller than the bio. */
    #homepage_elektra article p {
        font-size: clamp(0.9rem, 3.4vw, 1.1rem);
    }
    /* Short title in a heavily-padded section — size up to read as a heading.
       ID-scoped so it beats the later base .homepage-contact-h1 !important rule. */
    #homepage_contact_form .homepage-contact-h1 {
        font-size: clamp(2.5rem, 16vw, 9rem) !important;
        /* Break out of the section's side padding so it spans edge to edge. */
        align-self: stretch;
        box-sizing: border-box;
        margin-left: calc(-1 * clamp(2rem, 10vw, 16rem));
        margin-right: calc(-1 * clamp(2rem, 10vw, 16rem));
    }
    #homepage_elektra article {
        grid-column: 1 / -1;
        width: auto;
        margin-left: 10vw;
        margin-right: 10vw;
    }
    /* Full-width bio so the short BIOGRAPHY title can read as a heading. */
    #homepage_about article {
        grid-column: 1 / -1;
        width: auto;
        margin-left: 8vw;
        margin-right: 8vw;
    }
    #homepage_about article h1 {
        font-size: clamp(2.5rem, 10.5vw, 9rem);
        /* Break out of the article's side margin so it spans edge to edge. */
        margin-left: -8vw;
        margin-right: -8vw;
    }
    /* Socials: emphasise the title, demote the subtitle. */
    #homepage_socials .section_h1 {
        font-size: clamp(2.5rem, 12vw, 9rem);
    }
    #socials_subtitle {
        font-size: clamp(0.85rem, 3.5vw, 1.5rem);
        margin-top: 0.5rem;
    }
    #homepage_socials {
        padding-top: 1rem;
        padding-bottom: 2rem;
    }
    /* Contact section: trim the big vertical padding on mobile. */
    #homepage_contact_form {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    /* Bio page: 15vw side margins are too tight for the text on phones. */
    .margins {
        margin-left: 2rem;
        margin-right: 2rem;
    }
    /* Contact page title: fill to width like the homepage CONTACT heading. */
    .contact-page-title {
        font-size: clamp(2.5rem, 16vw, 11rem);
    }
}
/* Phones: drop the multi-column feature grid, use a simple margin. */
@media (max-width: 450px) {
    .homepage_feature {
        grid-template-columns: 1fr;
    }
    /* Narrow phones: 2-col header so the rotated hamburger has room (no overflow). */
    .nav_header-m {
        grid-template-columns: 70% 30%;
    }
    .nav_header-m .m-logo {
        grid-column: 1;
    }
    .nav_header-m .mobile-hamburger {
        grid-column: 2;
    }
    /* Shorten the photo on phones and frame the face (sits low in the image). */
    #homepage_elektra {
        height: 64vh;
        background-position: center 30%;
    }
    /* Shortened headings (UPCOMING / HIGHLIGHTS) are similar length now,
       so give every section heading one uniform size down the page. */
    .section_h1,
    #homepage_socials .section_h1,
    #homepage_about article h1,
    #homepage_contact_form .homepage-contact-h1 {
        font-size: clamp(2rem, 13vw, 9rem) !important;
    }
    /* Swap to the short heading text. */
    .hdr-full { display: none; }
    .hdr-short { display: inline; }
    /* Bio-page REPERTOIRE title: fill to width like the homepage headings. */
    .repertoire-title {
        font-size: clamp(2rem, 13vw, 9rem);
    }
    /* Contact page: pull "Get in Touch" up under the social icons. */
    .contact-page {
        margin-bottom: 1rem;
    }
    .contact-form-section h2 {
        margin-top: 1.5rem;
    }
    /* Linktree: its headings are long (13-20 chars) so the homepage unified
       13vw overflows — size them to fit, and shrink the oversized buttons. */
    .linktree-title {
        font-size: clamp(1.5rem, 8vw, 9rem) !important;
        margin: 1.5rem auto;
    }
    .more-ways-title {
        font-size: clamp(1.5rem, 8vw, 5rem) !important;
        white-space: normal !important;
        line-height: 1.05;
        margin-bottom: 1.5rem;
    }
    /* Tighten the news/socials block and shrink its headings. */
    .linktree-news-socials {
        padding-top: 2rem;
    }
    .linktree-news-socials .ln-columns .ln-socials h3 {
        font-size: clamp(1.3rem, 5vw, 2rem);
    }
    /* Newsletter title: keep it on one line. */
    .linktree-news-socials .ln-columns #h1-2 {
        font-size: clamp(0.9rem, 5.5vw, 2rem);
        white-space: nowrap;
    }
    #linktree {
        gap: 0.6rem;
        margin-bottom: 2rem;
        padding: 0 10vw;
    }
    #linktree button {
        padding: 0.55rem 1.5rem;
        font-size: clamp(0.95rem, 3.5vw, 1.25rem);
    }
    .linktree-more-videos {
        font-size: clamp(1rem, 4vw, 1.4rem);
        margin-bottom: 2.5rem;
    }
}