/* Alex Pyle Music — public site styles. Palette taken from the original Wix site. */

:root {
    --cream: #f2f2e6;
    --green: #77a78a;
    --teal: #557473;
    --teal-dark: #4a6564;
    --sage: #cbd3c9;
    --gold: #f0deb9;
    --ink: #2f2f2f;
    --white: #fff;
    --error: #b3261e;

    --font-body: 'Quicksand', system-ui, sans-serif;
    --font-display: 'Mulish', 'Avenir', system-ui, sans-serif;
    --font-script: 'Playfair Display', Georgia, serif;

    --header-h: 110px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
    margin: 0;
    background: var(--cream);
    color: var(--teal);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 400; }

.container { width: min(1100px, 100% - 32px); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 32px); }
.container--wide { width: min(1400px, 100% - 32px); }
.center { text-align: center; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--white); padding: 8px 16px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    background: var(--ink);
    color: var(--white);
    border: 0;
    padding: 10px 26px;
    font: 500 14px/1.4 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background .2s, color .2s;
}
.btn:hover, .btn:focus-visible { background: var(--teal); }
.btn--teal { background: var(--teal); }
.btn--teal:hover, .btn--teal:focus-visible { background: var(--ink); }
.btn--light { background: var(--cream); color: var(--teal); }
.btn--light:hover { background: var(--white); }

/* ---------- Header ---------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--green);
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.site-header__inner {
    width: min(1400px, 100% - 32px); margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand social" "nav nav";
    align-items: center;
    padding: 18px 0 10px;
}
.brand {
    grid-area: brand;
    font: 300 clamp(22px, 3vw, 32px)/1 var(--font-display);
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--teal);
    text-decoration: none;
}
.social { grid-area: social; display: flex; gap: 10px; align-items: center; }
.social a { color: #000; display: flex; }
.social a:hover { color: var(--teal); }

.site-nav { grid-area: nav; margin-top: 10px; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.site-nav a {
    font: 300 17px/1.6 var(--font-display);
    color: var(--teal);
    text-decoration: none;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--sage); }

.nav-toggle { display: none; }

@media (max-width: 860px) {
    :root { --header-h: 64px; }
    .site-header__inner { grid-template-columns: auto 1fr auto; grid-template-areas: "toggle brand social" "nav nav nav"; padding: 12px 0; column-gap: 14px; }
    .nav-toggle { grid-area: toggle; display: flex; flex-direction: column; gap: 5px; background: none; border: 0; padding: 6px 0; cursor: pointer; }
    .nav-toggle__bar { width: 24px; height: 2px; background: var(--teal); }
    .brand { font-size: 20px; }
    .social svg { width: 24px; height: 24px; }
    .site-nav { display: none; margin-top: 12px; }
    .site-nav.is-open { display: block; }
    .site-nav ul { flex-direction: column; gap: 2px; }
    .site-nav a { font-size: 19px; }
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: min(80vh, 720px);
    display: grid; place-items: center;
    text-align: center;
    background: var(--teal) var(--bg) center / cover no-repeat;
    padding: 60px 16px;
}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(20, 30, 30, .35); }
.hero--short { min-height: min(60vh, 520px); }
.hero__content { position: relative; max-width: 800px; }
.hero__title {
    font: 400 clamp(52px, 9vw, 96px)/1 var(--font-display);
    text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 3px 8px rgba(0,0,0,.45);
    margin-bottom: .35em;
}
.hero__title--light { text-transform: none; color: var(--white); font-weight: 300; }
.hero__lead {
    font: 300 clamp(22px, 3.6vw, 40px)/1.5 var(--font-display);
    color: var(--gold);
    text-shadow: 0 2px 6px rgba(0,0,0,.5);
    margin-bottom: 1.2em;
}

/* ---------- Sections ---------- */
.section-title { font: 400 clamp(32px, 4vw, 44px)/1.2 var(--font-body); color: var(--teal); text-transform: none; }
.section-title--xl { font-size: clamp(40px, 5vw, 56px); margin-bottom: .8em; }
.section-title--sm { font-size: 28px; margin-top: 1.4em; }
.section-title--light { color: var(--cream); }
.section-lead { font-size: 18px; text-align: center; margin-bottom: 40px; }

.intro { padding: 70px 0; text-align: center; }
.intro__big { font-size: clamp(22px, 2.6vw, 28px); line-height: 1.5; margin-bottom: .5em; }

.offerings { padding: 20px 0 80px; }
.offerings .section-title { text-align: center; }

.cards { display: grid; gap: 40px; }
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { display: flex; flex-direction: column; text-align: center; }
.card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 20px; }
.card h3 { font-size: 20px; }
.card p { font-size: 15px; }
.card .btn { margin: auto auto 0; }
.cards--light, .cards--light .card h3 { color: var(--cream); }

.banner {
    position: relative;
    background: var(--teal) var(--bg) center / cover no-repeat;
    padding: 90px 16px;
    text-align: center;
    color: var(--white);
}
.banner::before { content: ""; position: absolute; inset: 0; background: rgba(85, 116, 115, .72); }
.banner__content { position: relative; max-width: 760px; margin: 0 auto; }
.banner h2 { font-size: clamp(40px, 5vw, 56px); color: var(--white); }
.banner__lead { font-size: 22px; }

.band { padding: 80px 0; }
.band--green { background: var(--green); color: var(--cream); }
.band--teal { background: var(--teal); color: var(--cream); }

.page { padding: 60px 0 90px; }

/* ---------- Videos ---------- */
.home-videos { padding: 80px 0; }
.home-videos .section-title { text-align: center; }
.video { margin: 0 0 30px; }
.video__frame {
    position: relative; display: block; width: 100%;
    aspect-ratio: 16 / 9;
    background: #111;
    border: 0; padding: 0; overflow: hidden;
}
.video__frame img, .video__frame iframe, .video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__poster { cursor: pointer; }
.video__poster img { transition: transform .4s, opacity .3s; }
.video__poster:hover img { transform: scale(1.03); opacity: .85; }
.video__play {
    position: absolute; left: 50%; top: 50%;
    width: 68px; height: 68px; margin: -34px 0 0 -34px;
    border: 2px solid var(--white); border-radius: 50%;
    background: rgba(0,0,0,.25);
}
.video__play::after {
    content: ""; position: absolute; left: 26px; top: 20px;
    border-style: solid; border-width: 13px 0 13px 22px;
    border-color: transparent transparent transparent var(--white);
}
.video--large .video__play { top: 62%; }
.video__overlay-title {
    position: absolute; left: 10%; right: 10%; top: 18%;
    color: var(--white); font: 400 clamp(20px, 3.4vw, 38px)/1.3 var(--font-display);
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
}
.video figcaption { padding: 14px 4px 0; }
.video__title { display: block; font-size: 20px; }
.video__desc { display: block; font-size: 15px; opacity: .85; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 30px 30px; margin-bottom: 40px; }

/* ---------- Photos ---------- */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.gallery__item { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sage); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .4s; }
.gallery__item:hover img { transform: scale(1.03); }
.gallery__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 30px 14px 10px;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    color: var(--white); font-size: 15px;
    opacity: 0; transition: opacity .3s;
}
.gallery__item:hover .gallery__caption, .gallery__item:focus-visible .gallery__caption { opacity: 1; }
@media (hover: none) { .gallery__caption { opacity: 1; } }

.lightbox {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(15, 20, 20, .94);
    display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; max-width: 90vw; text-align: center; }
.lightbox img { max-width: 90vw; max-height: 82vh; margin: 0 auto; }
.lightbox figcaption { color: var(--cream); padding-top: 12px; min-height: 1.6em; }
.lightbox button { position: absolute; background: none; border: 0; color: var(--white); font-size: 48px; line-height: 1; cursor: pointer; padding: 10px 18px; opacity: .8; }
.lightbox button:hover { opacity: 1; }
.lightbox__close { top: 10px; right: 10px; }
.lightbox__prev { left: 6px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 6px; top: 50%; transform: translateY(-50%); }

/* ---------- Contact & forms ---------- */
.contact { padding: 80px 0 0; }
.contact__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 50px; padding-bottom: 60px; }
.contact__info a { text-decoration: none; }
.contact__info a:hover { text-decoration: underline; }
.contact__note { margin-top: 1.5em; }
.contact__map { display: block; width: 100%; height: 360px; border: 0; filter: grayscale(.4); }
@media (max-width: 800px) { .contact__grid { grid-template-columns: 1fr; gap: 20px; } }

.form-heading { font-size: 24px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label, .field legend { display: block; font-size: 15px; margin-bottom: 4px; }
.field input:not([type=radio]), .field textarea, .subscribe__form input {
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--teal);
    color: var(--ink);
    font: 15px/1.5 var(--font-body);
    border-radius: 0;
}
.field input:focus, .field textarea:focus, .subscribe__form input:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.field fieldset { border: 0; margin: 0; padding: 0; }
.choice { display: flex !important; gap: 8px; align-items: flex-start; font-size: 15px; margin-bottom: 6px; cursor: pointer; }
.choice input { margin-top: 6px; accent-color: var(--teal); }
.has-error input:not([type=radio]), .has-error textarea { border-color: var(--error); }
.field__error { color: var(--error); font-size: 14px; margin: 4px 0 0; }
.form-actions { text-align: right; }
.form-success { background: var(--white); border-left: 4px solid var(--green); padding: 20px 24px; }
.form-success h3 { font-size: 22px; }
.form-success p:last-child { margin: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.subscribe { padding: 70px 0 80px; border-top: 1px solid var(--sage); }
.subscribe__form { display: flex; max-width: 480px; margin: 20px auto 0; }
.subscribe__form input { flex: 1; }

/* ---------- Elle & Alex ---------- */
.script { font: italic 400 clamp(36px, 5vw, 54px)/1.2 var(--font-script); color: var(--teal); }
.script--sub { font-size: clamp(28px, 3.4vw, 40px); margin-top: -.3em; }
.script--light { color: var(--cream); }
.rule { width: 36px; border: 0; border-top: 3px solid var(--teal); margin: 0 0 28px; }

.split-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 560px; }
.split-hero__text { padding: 70px clamp(24px, 6vw, 110px); align-self: center; font-size: 15px; }
.split-hero__image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 800px) {
    .split-hero { grid-template-columns: 1fr; }
    .split-hero__text { padding: 50px 20px 30px; }
    .split-hero__image img { aspect-ratio: 4 / 3; }
}

.band .script { margin-bottom: 50px; }
.band--teal p { font-size: 17px; }

.songs { padding: 80px 0; }
.songs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
@media (max-width: 800px) { .songs__grid { grid-template-columns: 1fr; gap: 20px; } }
.songlist { background: var(--white); padding: 30px 36px; }
.songlist h3 { font-size: 22px; }
.songlist ul { list-style: none; margin: 0; padding: 0; }
.songlist li { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--cream); font-size: 15px; }
.songlist__artist { opacity: .75; text-align: right; }

.quote { margin: 40px 0; padding: 0 0 0 28px; border-left: 3px solid var(--gold); font-style: italic; }
.quote footer { font-style: normal; margin-top: -.4em; font-weight: 600; }
.quote footer::before { content: "— "; }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip img { width: 100%; aspect-ratio: 1; object-fit: cover; }
@media (max-width: 700px) { .strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- About ---------- */
.about { background: var(--teal); color: var(--cream); padding: 80px 0 90px; }
.about__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; align-items: start; }
.about__image img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.performances { padding-left: 20px; margin: 0 0 2em; }
.performances li { margin-bottom: 6px; }
@media (max-width: 800px) { .about__grid { grid-template-columns: 1fr; } .about__image { order: -1; } .about__image img { aspect-ratio: 4 / 3; } }

/* ---------- Tutoring ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; }
.feature__image img { width: 100%; height: 100%; object-fit: cover; }
.feature__text { padding: 60px clamp(24px, 6vw, 100px); align-self: center; text-align: center; }
.feature--reverse .feature__image { order: 2; }
@media (max-width: 800px) {
    .feature { grid-template-columns: 1fr; }
    .feature--reverse .feature__image { order: 0; }
    .feature__image img { aspect-ratio: 16 / 10; }
    .feature__text { padding: 40px 20px; }
}

/* ---------- Reviews ---------- */
.reviews {
    position: relative;
    background: var(--cream) var(--bg) center / cover fixed no-repeat;
    padding: 90px 0 100px;
    min-height: 70vh;
}
.reviews::before { content: ""; position: absolute; inset: 0; background: rgba(242, 242, 230, .86); }
.reviews .container { position: relative; }
.reviews .section-title { text-transform: uppercase; }
.review { margin-bottom: 50px; text-align: center; }
.review h2 { font-size: 22px; }
.review blockquote { margin: 0; font-size: 17px; }
.review footer { margin-top: -.4em; font-weight: 600; }
.review footer::before { content: "— "; }
@media (hover: none) { .reviews { background-attachment: scroll; } }

/* ---------- Gigs ---------- */
.gigs { list-style: none; margin: 0; padding: 0; }
.gig { display: flex; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--sage); }
.gig__date { flex: none; width: 72px; text-align: center; background: var(--teal); color: var(--cream); padding: 8px 0; line-height: 1.1; }
.gig__day { display: block; font-size: 28px; }
.gig__month { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.gig__venue { font-size: 20px; margin: 0; }
.gig__meta { margin: 0; font-size: 15px; opacity: .85; }

/* ---------- Footer ---------- */
.site-footer { text-align: center; padding: 40px 16px 30px; font-size: 15px; border-top: 1px solid var(--sage); }
.site-footer p { margin: 0 0 6px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__name { font-size: 22px; display: flex; gap: 6px; justify-content: center; align-items: center; }
.site-footer__name a { color: #c13584; display: flex; }
.site-footer__copy { font-size: 13px; margin-top: 12px !important; }