/*
Theme Name: Will Haynes Music
Theme URI: https://willhaynesmusic.com
Author: Will Haynes
Author URI: https://willhaynesmusic.com
Description: A dark, photo-led one-page theme for a solo acoustic musician. Every panel — hero, about, music, songs, booking, footer — is editable under Appearance → Customize, with a native booking form that emails inquiries straight to your inbox. No plugins required.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: willhaynesmusic
*/

:root{
  --bg:#0E0C0A;
  --bg-2:#141210;
  --bg-3:#1A1713;
  --text:#F0E9DB;
  --text-soft:#B4AA97;
  --text-faint:#8B8171;
  --line:rgba(240,233,219,.14);
  --line-strong:rgba(240,233,219,.28);
  --gold:#C9A25B;
  --gold-soft:rgba(201,162,91,.5);
  --maxw:1160px;
  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"EB Garamond",Georgia,serif;
  --hero-img:none;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:26px;width:100%}
.eyebrow{
  font-family:var(--body);font-size:.82rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--text-faint);
}
.u{
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;
  text-decoration-color:var(--gold-soft);transition:text-decoration-color .2s,color .2s;
}
.u:hover{text-decoration-color:var(--gold);color:#fff}
em{font-style:italic}

.btn{
  font-family:var(--body);font-size:1rem;font-weight:600;letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:11px 22px;border-radius:2px;border:1px solid var(--line-strong);
  background:transparent;color:var(--text);transition:background .2s,color .2s,border-color .2s;
}
.btn:hover{border-color:var(--text);background:var(--text);color:#141210}
.btn-solid{background:var(--text);color:#141210;border-color:var(--text)}
.btn-solid:hover{background:#fff;border-color:#fff}

/* image frames */
.imgframe{position:relative;overflow:hidden;background-size:cover;background-position:center;background-color:#141210;border:1px solid var(--line)}
.playbtn{position:absolute;inset:0;margin:auto;width:70px;height:70px;border:1px solid rgba(240,233,219,.6);
  border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(14,12,10,.25);backdrop-filter:blur(2px)}
.playbtn::before{content:"";border-left:16px solid #F0E9DB;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}

.artist-groups{display:grid;grid-template-columns:repeat(2,1fr);gap:36px 60px}
.agroup h4{font-family:var(--body);font-size:.78rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.agroup p{font-family:var(--serif);font-size:1.28rem;line-height:1.5;color:var(--text);font-weight:400}
@media(max-width:720px){.artist-groups{grid-template-columns:1fr}}

/* Header */
header.nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  padding-top:env(safe-area-inset-top,0px);
  transition:background .3s,border-color .3s,backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
header.nav.scrolled{
  background:rgba(14,12,10,.82);backdrop-filter:saturate(1.1) blur(12px);
  border-bottom-color:var(--line);
}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding-block:20px}
.brand{font-family:var(--serif);font-weight:500;font-size:1.4rem;letter-spacing:.01em}
.nav-links{display:flex;justify-content:center;gap:30px;font-size:1.02rem;color:var(--text-soft);flex-wrap:wrap}
.nav-links a:hover{color:var(--text)}
.nav-right{display:flex;justify-content:flex-end}
@media(max-width:780px){
  .nav-inner{grid-template-columns:1fr auto}
  .nav-links{display:none}
}

/* Hero */
.hero{position:relative;min-height:min(92vh,760px);display:flex;align-items:flex-end;
  background:
    linear-gradient(180deg,rgba(14,12,10,.62) 0%,rgba(14,12,10,.22) 34%,rgba(14,12,10,.8) 100%),
    var(--hero-img) center/cover no-repeat,#0d0b09;
}
.hero-inner{position:relative;z-index:2;padding-block:0 72px;width:100%}
.hero .eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px;color:var(--text-soft)}
.hero .eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.hero h1{font-size:clamp(2.7rem,6.6vw,5.2rem);font-weight:500;color:#F6F0E2}
.hero h1 em{font-style:italic;font-weight:400}
.hero h1 .u{text-decoration-thickness:1.5px;text-underline-offset:8px}
.hero .sub{font-size:clamp(1.1rem,2vw,1.35rem);color:var(--text-soft);max-width:40ch;margin-top:26px}
.hero-cta{display:flex;gap:26px;align-items:center;margin-top:34px;flex-wrap:wrap;font-size:1.05rem}
.hero-cta a.textlink{color:var(--text);display:inline-flex;align-items:center;gap:8px}
.hero-cta a.textlink .u{text-underline-offset:6px}

/* Ticker */
.ticker{border-block:1px solid var(--line);background:var(--bg-2)}
.ticker-inner{padding-block:20px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font-size:1.05rem}
.ticker .lead{font-family:var(--body);font-size:.8rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.ticker .msg{color:var(--text-soft)}
.ticker .msg b{color:var(--text);font-weight:600}

section{padding-block:96px}
.lead-line{font-size:.8rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--text-faint);margin-bottom:26px}

/* About */
.about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;align-items:center}
.about-photo{aspect-ratio:4/5;border-radius:3px}
.about h2{font-size:clamp(2rem,3.8vw,3rem);margin-bottom:26px;font-weight:500}
.about p{color:var(--text-soft);margin-bottom:20px;max-width:52ch}
.about p.first{color:var(--text);font-size:1.12rem}
@media(max-width:820px){.about-grid{grid-template-columns:1fr;gap:34px}.about-photo{max-width:360px}}

/* Music / video */
.listen-video{aspect-ratio:16/9;border-radius:3px}
.listen-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.songwriter{max-width:64ch;color:var(--text-soft);font-size:1.05rem}
.songwriter em{color:var(--text);font-style:italic}

/* audio demo band (under the hero) */
.audio-band{background:var(--bg-2);border-bottom:1px solid var(--line)}
.audio-band-inner{padding-block:32px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.audio-band .audio-label{font-family:var(--body);font-size:.92rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:14px}
.audio-band .audio-label::before,.audio-band .audio-label::after{content:"";width:28px;height:1px;background:var(--gold-soft)}
.audio-band .audio-player{width:100%;max-width:560px}
.audio-band audio{width:100%;display:block}
.audio-band .mejs-container,.audio-band .wp-audio-shortcode{width:100%!important;max-width:100%}
.audio-band .mejs-controls{background:transparent}

/* Songs (reuses .play band) */
.play{background:var(--bg-2);border-block:1px solid var(--line)}
.play-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:8px}
.play-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);font-weight:500;max-width:22ch}

/* Booking */
.book{background:var(--bg-2);border-top:1px solid var(--line)}
.book-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:64px;align-items:start}
.book h2{font-size:clamp(2rem,4vw,3rem);font-weight:500}
.book .say{color:var(--text-soft);margin-top:22px;max-width:36ch;font-size:1.1rem}
.book .direct{margin-top:30px;font-size:1.05rem;color:var(--text-faint);line-height:1.5}
.book .notice{margin-bottom:22px;padding:14px 18px;border:1px solid var(--gold-soft);border-radius:3px;color:var(--text);background:rgba(201,162,91,.08)}
form.booking{display:grid;gap:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--body);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.field input,.field select,.field textarea{
  font-family:var(--body);font-size:1.05rem;color:var(--text);
  background:transparent;border:none;border-bottom:1px solid var(--line-strong);
  padding:9px 2px;width:100%;border-radius:0;
}
.field select option{background:var(--bg-2);color:var(--text)}
.field textarea{resize:vertical;min-height:70px}
.field input::placeholder,.field textarea::placeholder{color:var(--text-faint)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.hp{position:absolute;left:-5000px;height:0;overflow:hidden}
form.booking .btn-solid{justify-self:start;margin-top:6px}
.form-note{font-size:.9rem;color:var(--text-faint)}
@media(max-width:820px){.book-grid{grid-template-columns:1fr;gap:40px}.row{grid-template-columns:1fr}}

/* Footer */
footer.site{border-top:1px solid var(--line);padding-block:64px 48px;background:var(--bg)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;align-items:start}
.foot-grid h4{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin:0 0 14px}
.foot-grid p,.foot-grid a{color:var(--text-soft);font-size:1.02rem;display:block;margin-bottom:6px}
.foot-brand{font-family:var(--serif);font-size:1.6rem;margin-bottom:10px}
.foot-note{color:var(--text-faint);font-size:.92rem;max-width:34ch}
.foot-soon{color:var(--text-faint);font-style:italic;font-size:.98rem}
.foot-bottom{border-top:1px solid var(--line);margin-top:48px;padding-top:24px;color:var(--text-faint);font-size:.9rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media(max-width:720px){.foot-grid{grid-template-columns:1fr;gap:32px}}

@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}