/*
Theme Name: Ellie Jarrell Music
Theme URI: https://elliejarrellmusic.com/
Author: OpenAI for Ellie Jarrell Music
Description: Custom responsive artist website based on the approved warm-white rustic editorial mockup.
Version: 1.0.0
Text Domain: ellie-jarrell-music
*/

:root{
  --ej-white:#fbfaf7;
  --ej-paper:#f6f4ef;
  --ej-ink:#27251f;
  --ej-muted:#7f7768;
  --ej-gold:#b5a06f;
  --ej-olive:#8c825a;
  --ej-wood:#665748;
  --ej-dark:#1f1d19;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ej-white);color:var(--ej-ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.ej-wrap{width:min(1200px,calc(100% - 48px));margin:0 auto}
.ej-section{padding:80px 0;background:var(--ej-white)}
.ej-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ej-olive);font-weight:700}
.ej-title{font-family:Georgia,'Times New Roman',serif;font-size:clamp(34px,4vw,58px);font-weight:400;letter-spacing:.02em;margin:0 0 28px}
.ej-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 25px;border:1px solid rgba(255,255,255,.85);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transition:.2s ease}
.ej-btn:hover{transform:translateY(-1px);opacity:.9}
.ej-btn-solid{background:rgba(250,248,242,.92);border-color:rgba(250,248,242,.92);color:#2d2a24}
.ej-btn-dark{background:var(--ej-dark);color:white;border-color:var(--ej-dark)}

/* Header + hero */
.ej-hero{position:relative;min-height:800px;color:white;background-image:linear-gradient(90deg,rgba(22,19,15,.32) 0%,rgba(22,19,15,.15) 40%,rgba(22,19,15,.04) 64%,rgba(22,19,15,.08) 100%),url('https://1255225.us16.myftpupload.com/wp-content/uploads/2026/08/EJBL-314-scaled.jpg');background-size:cover;background-position:53% 25%;overflow:hidden}
.ej-nav{height:88px;display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid rgba(255,255,255,.16);position:relative;z-index:3}
.ej-brand{font-family:Georgia,'Times New Roman',serif;font-size:25px;letter-spacing:.12em;white-space:nowrap}
.ej-menu{display:flex;align-items:center;gap:26px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ej-social{display:flex;gap:12px;font-size:12px;opacity:.9}
.ej-hero-grid{min-height:712px;display:grid;grid-template-columns:1fr 1fr;align-items:center;position:relative;z-index:2;padding-bottom:20px}
.ej-hero-copy{align-self:start;padding-top:145px;max-width:510px}
.ej-hero-name{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(78px,9.6vw,148px);line-height:.76;letter-spacing:.015em;margin:0;text-transform:uppercase;color:#f7f5ef;text-shadow:0 1px 14px rgba(0,0,0,.12)}
.ej-hero-sub{margin:31px 0 0;font-size:16px;letter-spacing:.17em;text-transform:uppercase;color:#e7ddc5;font-weight:700}
.ej-hero-locations{margin:10px 0 0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#f3efe4}
.ej-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.ej-ovation{justify-self:end;align-self:center;text-align:right;margin-top:80px;max-width:260px;padding-right:4px}
.ej-ovation-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#eee8d8}
.ej-ovation-name{font-family:Georgia,'Times New Roman',serif;font-size:37px;letter-spacing:.08em;margin:8px 0 2px;color:#e6d9b6}
.ej-ovation-sub{font-size:10px;letter-spacing:.35em;text-transform:uppercase;color:#e6d9b6}
.ej-ovation-link{display:inline-block;margin-top:18px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:4px}

/* Highlights */
.ej-section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:30px}
.ej-section-head h2{font-family:Georgia,'Times New Roman',serif;font-size:38px;font-weight:400;margin:0}
.ej-section-head a{font-size:11px;letter-spacing:.15em;text-transform:uppercase;border-bottom:1px solid var(--ej-gold);padding-bottom:4px}
.ej-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ej-card{background:white;border:1px solid #ece9e1}
.ej-video-placeholder{aspect-ratio:16/10;background:linear-gradient(135deg,#716d66,#26231f);position:relative;overflow:hidden}
.ej-video-placeholder::after{content:'▶';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:54px;height:54px;border:1px solid rgba(255,255,255,.9);border-radius:50%;display:grid;place-items:center;color:white;padding-left:4px}
.ej-card-copy{padding:19px 20px 22px}
.ej-card-copy strong{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.ej-card-copy span{font-family:Georgia,'Times New Roman',serif;font-style:italic;color:var(--ej-muted);font-size:14px}

/* Shows */
.ej-shows{background:#f8f7f3}
.ej-shows-grid{display:grid;grid-template-columns:.95fr 1.55fr;gap:70px;align-items:start}
.ej-show-list{border-top:1px solid #dcd7ce}
.ej-show{display:grid;grid-template-columns:84px 1fr auto;gap:18px;align-items:center;padding:20px 0;border-bottom:1px solid #dcd7ce}
.ej-date{font-family:Georgia,'Times New Roman',serif;text-align:center;color:var(--ej-olive)}
.ej-date b{display:block;font-size:12px;letter-spacing:.12em}.ej-date span{font-size:30px}
.ej-show strong{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase}.ej-show small{color:var(--ej-muted)}
.ej-ticket{font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.ej-poster-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.ej-poster{height:325px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:transparent;border:0;padding:0}
.ej-poster img{width:100%;height:100%;object-fit:contain;display:block}

/* Newsletter */
.ej-newsletter{background:#d9d1c2;padding:54px 0}
.ej-newsletter-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px}
.ej-newsletter h2{font-family:Georgia,'Times New Roman',serif;font-size:48px;font-weight:400;margin:0 0 7px}
.ej-newsletter p{margin:0;color:#655e52}
.ej-form{display:flex;gap:10px}.ej-form input{flex:1;min-height:48px;border:1px solid rgba(35,32,28,.22);background:#f7f5f0;padding:0 16px;font:inherit}

/* Gallery */
.ej-gallery{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:12px;-webkit-overflow-scrolling:touch;scrollbar-width:auto}.ej-gallery::-webkit-scrollbar{height:8px}.ej-gallery::-webkit-scrollbar-track{background:#f0eee9}.ej-gallery::-webkit-scrollbar-thumb{background:#8c825a;border-radius:10px}.ej-gallery>div{flex:0 0 280px;height:360px;overflow:hidden;scroll-snap-align:start;background:#e8e3d7}.ej-gallery img{width:100%;height:100%;object-fit:cover;display:block}

/* Footer */
.ej-footer{background:#201e1a;color:#eeeae0;padding:68px 0 30px}.ej-footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:48px}.ej-footer-brand{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:54px;line-height:.78}.ej-footer h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px;color:#cfc4aa}.ej-footer a,.ej-footer p{font-size:13px;color:#ddd7cb;display:block;margin:7px 0}.ej-copy{border-top:1px solid rgba(255,255,255,.12);margin-top:45px;padding-top:22px;font-size:11px;color:#918b80}

@media (max-width:900px){
 .ej-menu{display:none}.ej-hero{min-height:760px;background-position:51% 18%}.ej-hero-grid{grid-template-columns:1fr;min-height:670px}.ej-hero-copy{padding-top:90px;max-width:460px}.ej-hero-name{font-size:clamp(70px,18vw,110px)}.ej-ovation{justify-self:start;text-align:left;margin-top:20px}.ej-cards,.ej-poster-grid{grid-template-columns:1fr}.ej-shows-grid,.ej-newsletter-grid,.ej-footer-grid{grid-template-columns:1fr}.ej-gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:560px){.ej-wrap{width:min(100% - 28px,1200px)}.ej-hero{min-height:700px}.ej-nav{height:72px}.ej-brand{font-size:19px}.ej-hero-copy{padding-top:75px}.ej-hero-sub{font-size:12px}.ej-section{padding:58px 0}.ej-section-head{align-items:start;flex-direction:column}.ej-cards{grid-template-columns:1fr}.ej-show{grid-template-columns:65px 1fr}.ej-ticket{display:none}.ej-gallery{grid-template-columns:repeat(2,1fr)}.ej-form{flex-direction:column}}
.ej-social{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:10px!important}
.ej-social a{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:18px!important;height:18px!important;margin:0!important;padding:0!important}
.ej-social a img{width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important;object-fit:contain!important;display:block!important;margin:0!important;padding:0!important}
/* About Page */
.ej-about-page{
    background:#fbfaf7;
    color:#27251f;
    min-height:100vh;
}

.ej-about-nav{
    width:min(1200px,calc(100% - 48px));
    margin:0 auto;
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    border-bottom:1px solid #ddd7ce;
}

.ej-about-brand{
    font-family:Georgia,'Times New Roman',serif;
    font-size:24px;
    letter-spacing:.12em;
    color:#27251f;
    white-space:nowrap;
}

.ej-about-menu{
    display:flex;
    align-items:center;
    gap:25px;
}

.ej-about-menu a{
    color:#27251f;
    font-size:11px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.ej-about-content{
    width:min(1200px,calc(100% - 48px));
    margin:0 auto;
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:70px;
    align-items:start;
    padding:70px 0 90px;
}

.ej-about-photo{
    position:sticky;
    top:30px;
}

.ej-about-photo img{
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
}

.ej-about-copy{
    max-width:650px;
}

.ej-about-copy .ej-kicker{
    font-size:12px;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:#8c825a;
    font-weight:700;
    margin-bottom:10px;
}

.ej-about-copy h1{
    font-family:Georgia,'Times New Roman',serif;
    font-size:clamp(48px,5vw,74px);
    font-weight:400;
    line-height:1;
    letter-spacing:.03em;
    margin:0 0 36px;
}

.ej-about-copy p{
    font-family:Arial,Helvetica,sans-serif;
    font-size:16px;
    line-height:1.75;
    margin:0 0 24px;
}

.ej-about-copy p em{
    font-style:normal;
}

@media (max-width:900px){
    .ej-about-nav{
        min-height:72px;
    }

    .ej-about-menu{
        display:none;
    }

    .ej-about-content{
        grid-template-columns:1fr;
        gap:40px;
        padding:40px 0 65px;
    }

    .ej-about-photo{
        position:static;
    }

    .ej-about-photo img{
        max-height:650px;
        object-fit:cover;
        object-position:center top;
    }
}
/* ABOUT PAGE FINAL FIX */

.ej-about-page{
    width:100%!important;
    min-height:100vh!important;
    background:#fbfaf7!important;
    color:#27251f!important;
}

.ej-about-nav{
    width:min(1200px,calc(100% - 60px))!important;
    height:auto!important;
    min-height:88px!important;
    margin:0 auto!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:auto 1fr auto!important;
    align-items:center!important;
    gap:32px!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    border-bottom:1px solid rgba(35,32,28,.15)!important;
}

.ej-about-brand{
    font-family:Georgia,'Times New Roman',serif!important;
    font-size:24px!important;
    letter-spacing:.12em!important;
    color:#27251f!important;
    white-space:nowrap!important;
}

.ej-about-menu{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:25px!important;
    position:static!important;
    width:auto!important;
}

.ej-about-menu a{
    color:#27251f!important;
    font-size:11px!important;
    font-weight:700!important;
    letter-spacing:.14em!important;
    text-transform:uppercase!important;
}

.ej-about-social{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    width:auto!important;
    height:auto!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
}

.ej-about-social a{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    margin:0!important;
    padding:0!important;
}

.ej-about-social img{
    display:block!important;
    width:18px!important;
    height:18px!important;
    min-width:18px!important;
    min-height:18px!important;
    max-width:18px!important;
    max-height:18px!important;
    object-fit:contain!important;
    filter:brightness(0)!important;
    margin:0!important;
    padding:0!important;
}

.ej-about-content{
    width:min(1200px,calc(100% - 60px))!important;
    margin:68px auto 80px!important;
    padding:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr)!important;
    gap:68px!important;
    align-items:start!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
}

.ej-about-photo{
    width:100%!important;
    height:auto!important;
    position:static!important;
    margin:0!important;
    padding:0!important;
}

.ej-about-photo img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    max-width:100%!important;
    max-height:none!important;
    object-fit:contain!important;
    margin:0!important;
    padding:0!important;
}

.ej-about-copy{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
}

.ej-about-copy p{
    width:100%!important;
    max-width:100%!important;
}

@media (max-width:900px){
    .ej-about-nav{
        width:min(100% - 32px,1200px)!important;
        grid-template-columns:1fr auto!important;
        min-height:72px!important;
    }

    .ej-about-menu{
        display:none!important;
    }

    .ej-about-content{
        width:min(100% - 32px,1200px)!important;
        grid-template-columns:1fr!important;
        gap:40px!important;
        margin:40px auto 65px!important;
    }

    .ej-about-photo img{
        width:100%!important;
        height:auto!important;
        max-height:none!important;
        object-fit:contain!important;
    }
}