/* Sons of Mary — stained-glass church window, after dark */
@font-face{font-family:"Unifraktur";src:url(assets/fonts/UnifrakturMaguntia-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cinzel";src:url(assets/fonts/Cinzel-VariableFont_wght.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(assets/fonts/EBGaramond-VariableFont_wght.woff2) format("woff2");font-weight:400 800;font-display:swap}
:root{
  --bg:#070a16; --bg-alt:#0c1226; --card:#101833;
  --ink:#f4efe3; --ink-soft:#c9c6d6; --muted:#8f93ad;
  --gold:#e8b93c; --gold-deep:#b98a1e; --red:#c0283a; --blue:#2447a8; --green:#2f9a63;
  --line:rgba(232,185,60,.26);
  --black:"Unifraktur","UnifrakturMaguntia","Old English Text MT",Georgia,serif;
  --caps:"Cinzel","Trajan Pro",Georgia,serif;
  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --radius:12px; --max:1120px;
  --lattice:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 0 56 28 28 56 0 28Z' fill='none' stroke='%23e8b93c' stroke-opacity='.06' stroke-width='1'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.2rem/1.65 var(--serif);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:var(--gold)}
a:hover{color:#ffd978}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
h1,h2,h3{margin:0 0 .5em;line-height:1.05;font-weight:400}
p{margin:0 0 1em}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:#120d02;padding:.5em 1em;z-index:100}
.skip:focus{left:1rem;top:1rem}

/* nav */
.nav{position:absolute;inset:0 0 auto 0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem}
.nav__brand{font:400 1.7rem/1 var(--black);color:var(--gold);text-decoration:none;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.nav__links{display:none;list-style:none;margin:0;padding:0;gap:1.8rem}
.nav__links a{font:600 .74rem/1 var(--caps);letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none}
.nav__links a:hover{color:var(--gold)}
@media (min-width:760px){.nav{padding:1.4rem 2.5rem}.nav__links{display:flex}}

/* hero — the window is the centrepiece, lit from behind */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;overflow:hidden;isolation:isolate;text-align:center;
  padding:4.6rem 1.25rem 3.5rem;background:var(--lattice),var(--bg)}
.hero__glow{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 38% at 22% 30%,rgba(36,71,168,.5),transparent 70%),
    radial-gradient(ellipse 55% 34% at 80% 24%,rgba(192,40,58,.38),transparent 70%),
    radial-gradient(ellipse 50% 30% at 50% 62%,rgba(232,185,60,.28),transparent 70%),
    radial-gradient(ellipse 50% 26% at 78% 78%,rgba(47,154,99,.26),transparent 70%)}
.hero__art{flex:none;margin-bottom:1.8rem}
.hero__art a{display:block;position:relative;border-radius:46% 46% 6px 6px / 11% 11% 6px 6px;
  box-shadow:0 0 0 1px rgba(232,185,60,.55),0 0 60px rgba(232,185,60,.28),0 0 140px rgba(36,71,168,.45),0 30px 60px rgba(0,0,0,.6);overflow:hidden}
.hero__img{height:min(74svh,660px);width:auto;aspect-ratio:944/2080;max-width:calc(100vw - 2.5rem);object-fit:cover}
.hero__content{width:100%;max-width:640px}
.eyebrow{font:600 .75rem/1.3 var(--caps);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.hero__title{font:400 clamp(3.9rem,19vw,6.6rem)/.95 var(--black);color:var(--ink);margin:0 0 1.2rem;
  text-shadow:0 0 30px rgba(232,185,60,.35),0 4px 24px rgba(0,0,0,.7)}
.hero__title span{color:var(--gold)}
.hero__tag{font-size:1.25rem;color:var(--ink-soft);max-width:30em;margin:0 auto 1.8rem}
@media (min-width:900px){
  .hero{flex-direction:row-reverse;justify-content:center;gap:clamp(3rem,7vw,7rem);min-height:100svh;padding:6rem 2.5rem 4rem;text-align:left}
  .hero__art{margin:0}
  .hero__img{height:min(84svh,860px)}
  .hero__content{max-width:520px;flex:none}
  .hero__title{font-size:clamp(5rem,8.2vw,7.6rem)}
  .hero__tag{margin-left:0}
  .hero .btns{justify-content:flex-start;margin:0}
}

/* buttons */
.btns{display:flex;flex-direction:column;gap:.8rem;align-items:stretch;max-width:320px;margin:0 auto}
@media (min-width:560px){.btns{flex-direction:row;max-width:none;justify-content:center}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:1em 1.7em;border-radius:999px;
  font:600 .8rem/1 var(--caps);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--gold);
  transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:linear-gradient(180deg,#f2c955,var(--gold-deep));color:#140e02;box-shadow:0 6px 24px rgba(232,185,60,.25)}
.btn--primary:hover{background:linear-gradient(180deg,#ffdf80,#d19f26);color:#140e02}
.btn--ghost{background:rgba(7,10,22,.5);color:var(--ink);border-color:rgba(244,239,227,.5)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.ico{width:1.2em;height:1.2em;fill:currentColor;flex:none}

/* divider */
.rule{display:flex;align-items:center;justify-content:center;gap:.7rem;padding:0 1.25rem;margin:-1px 0}
.rule span{flex:1;max-width:260px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule span:last-child{transform:scaleX(-1)}
.rule svg{width:14px;height:14px;fill:var(--gold)}
.rule svg:nth-of-type(2){width:20px;height:20px;fill:var(--red)}

/* sections */
.section{padding:4.5rem 1.25rem}
.section--lead{background:var(--lattice),linear-gradient(180deg,var(--bg-alt),var(--bg));border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:760px){.section{padding:6.5rem 2.5rem}}
.wrap{max-width:var(--max);margin:0 auto}
.wrap--narrow{max-width:740px}
.wrap--split{display:grid;gap:2.5rem;align-items:center}
@media (min-width:900px){.wrap--split{grid-template-columns:5fr 6fr;gap:4.5rem}}
.center{text-align:center}
h2{font:400 clamp(2.9rem,10vw,4.4rem)/1 var(--black);color:var(--ink);text-shadow:0 0 24px rgba(232,185,60,.2)}
.lead{font-size:1.45rem;line-height:1.5;color:var(--ink)}
.wrap p:not(.lead):not(.eyebrow){color:var(--ink-soft)}
.muted{color:var(--muted)!important;font-size:1rem}

/* songs */
.songs{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.6rem}
.songs li{display:flex;align-items:baseline;gap:1rem;padding:.9rem 1.2rem;background:linear-gradient(90deg,rgba(36,71,168,.22),rgba(16,24,51,.9));
  border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius)}
.songs li:nth-child(3n+2){border-left-color:var(--red)}
.songs li:nth-child(3n){border-left-color:var(--green)}
.songs__n{flex:none;width:2.4em;font:600 .78rem/1 var(--caps);letter-spacing:.1em;color:var(--gold)}
.songs__t{font:400 clamp(1.5rem,5.4vw,1.9rem)/1.15 var(--black);color:var(--ink)}
.spotify{width:100%;border:0;border-radius:12px}

/* shows */
.shows{list-style:none;margin:2.2rem auto;padding:0;display:grid;gap:1rem;max-width:760px}
.show{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:center;padding:1rem 1.25rem;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.show__date{display:grid;place-items:center;min-width:74px;padding:.5rem .6rem;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--blue),#16295f);
  border:1px solid rgba(232,185,60,.5);font-family:var(--caps);text-align:center;line-height:1}
.show__mon{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:700}
.show__day{font-size:1.9rem;font-weight:700;color:var(--ink);margin:.12em 0}
.show__yr{font-size:.7rem;letter-spacing:.12em;color:var(--ink-soft)}
.show__info h3{font:400 1.8rem/1.1 var(--black);margin:0 0 .15em}
.show__info p{margin:0;color:var(--ink-soft);font-size:1.05rem}
.show--venue{grid-template-columns:1fr;text-align:center;background:transparent;border-style:dashed}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;max-width:760px;margin:1rem auto 0}
.frame{aspect-ratio:4/5;display:grid;place-items:center;padding:.5rem;text-align:center;border-radius:999px 999px 8px 8px;
  border:1px solid var(--line);background:var(--lattice),linear-gradient(160deg,rgba(36,71,168,.25),rgba(192,40,58,.14) 55%,rgba(47,154,99,.16))}
.frame:nth-child(2){margin-top:-1rem}
.frame span{font:600 .62rem/1.4 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.frame img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
@media (min-width:560px){.photos{gap:1.2rem}.frame span{font-size:.72rem}}

/* footer */
.footer{padding:3rem 1.25rem 3.5rem;text-align:center;border-top:1px solid var(--line);background:var(--bg)}
.footer__brand{font:400 2.4rem/1 var(--black);color:var(--gold);margin:0 0 .6rem}
.footer p:last-child{margin:0;color:var(--muted);font-size:.95rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* additions */
.btns--left{margin:0;max-width:none}
@media (max-width:559px){.btns--left{max-width:320px;margin:0 auto}}
.wrap--player{max-width:760px;margin-top:3rem}
.frame--photo{margin:0;padding:0;overflow:hidden}
.frame--photo a{display:block;width:100%;height:100%;border-radius:inherit}
.frame--photo img{filter:contrast(1.03)}