*{box-sizing:border-box}
html,body{margin:0;background:#00080f;color:#f2f2f0}
body{font-family:'Montserrat',system-ui,sans-serif;font-weight:300;line-height:1.7;min-height:100vh;display:flex;flex-direction:column}
a{color:#8a95a3;text-decoration:none}a:hover{color:#f2f2f0}
img{display:block;max-width:100%}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;padding:18px 64px;border-bottom:1px solid #14232f}
.logo{line-height:0}.logo img{height:46px;width:auto}
nav{display:flex;flex-wrap:wrap;gap:12px 28px}
nav a{font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:6px 0}
nav a.active{color:#f2f2f0;border-bottom:1px solid #bc9467}
.wrap{padding:72px 64px 100px;flex:1;width:100%;max-width:1400px;margin:0 auto}
.eyebrow{font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:#bc9467}
.eyebrow.center{text-align:center}
h1{margin:18px 0 0;font-weight:300;font-size:48px;line-height:1.2;letter-spacing:.03em}
h2{margin:0;font-weight:300;font-size:34px;letter-spacing:.03em}
h2.spaced{margin-top:72px}
.sub{margin:14px 0 0;max-width:560px;color:#8a95a3}
.hero{line-height:0}.hero img{width:100%;height:auto}
.hero .tag{font-size:12px;letter-spacing:.35em;text-transform:uppercase;color:#bc9467;line-height:1.7;text-align:center;padding:18px 24px 0}
.hero+.wrap{padding-top:56px}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:24px}
.pills a{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:132px;padding:0 24px;border:1px solid #bc9467;border-radius:999px;color:#f2f2f0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;transition:background .2s}
.pills a:hover{background:#bc9467;color:#00080f}
.rowhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px;margin:72px 0 34px}
.more{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#bc9467;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:30px;margin-top:0;align-items:start}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:block;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:default}
.ph{display:block;position:relative;width:100%;height:0;padding-bottom:150%;background:#06121d;overflow:hidden}.ph.sq{padding-bottom:100%}.ph img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}
.card .t{display:block;margin-top:12px;font-size:16px;font-weight:400;line-height:1.4}
.card .m{display:block;margin-top:4px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a95a3}
.card.play{cursor:pointer}.card.play:hover .ph,.card.play:focus-visible .ph{opacity:.8}
.card.play:focus-visible{outline:1px solid #bc9467;outline-offset:4px}
.card[hidden]{display:none}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:34px 0 40px}
.filters button{background:none;font:inherit;font-size:12px;letter-spacing:.18em;text-transform:uppercase;padding:9px 18px;cursor:pointer;min-height:44px;border:1px solid #14232f;color:#8a95a3}
.filters button.on{border-color:#bc9467;color:#bc9467}
.albums{align-items:start;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px;margin-top:28px}

.albums a{display:block;line-height:0;transition:opacity .2s}.albums a:hover{opacity:.8}
.about{display:flex;flex-wrap:wrap;gap:56px;margin-top:48px;align-items:flex-start}
.about>img{flex:0 1 380px;min-width:260px;width:380px;aspect-ratio:4/5;object-fit:cover;border:1px solid #14232f}
.bio{flex:1 1 420px;min-width:0;color:#cdd3da;font-size:16px;max-width:760px}
.bio p{margin:0 0 18px}.bio .lead{font-size:19px}
.spotify{margin-top:40px;max-width:960px}.spotify iframe{border:0;border-radius:12px;display:block}
.mail{display:inline-block;margin-top:40px;font-size:34px;font-weight:300;color:#f2f2f0;border-bottom:1px solid #bc9467;padding-bottom:4px;word-break:break-all}
.photos{display:flex;flex-wrap:wrap;gap:20px;margin-top:48px}
.photos img{flex:0 1 240px;max-width:240px;width:100%;height:auto;background:#06121d}
footer{border-top:1px solid #14232f;padding:36px 64px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:13px;color:#8a95a3}
.modal{position:fixed;inset:0;z-index:50;background:rgba(0,4,8,.9);display:none;align-items:center;justify-content:center;padding:60px 24px}
.modal.open{display:flex}
.mbox{width:min(960px,100%);position:relative}
.mclose{position:absolute;right:0;top:-46px;background:none;border:0;color:#f2f2f0;font:inherit;font-size:13px;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;min-height:44px;padding:0 4px}
.frame{aspect-ratio:16/9;background:#000;border:1px solid #14232f}
.frame iframe{width:100%;height:100%;border:0;display:block}
@media(max-width:900px){.top{padding:16px 24px}.wrap{padding:48px 24px 72px}footer{padding:28px 24px}h1{font-size:36px}h2{font-size:28px}.grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}.albums{grid-template-columns:repeat(3,minmax(0,1fr))}.about{gap:32px}.about>img{flex-basis:100%;width:100%;max-width:380px}.mail{font-size:22px}}
@media(max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.card .t{font-size:14px}.pills a{min-width:calc(50% - 7px);padding:0 12px;letter-spacing:.12em}.photos img{flex-basis:calc(50% - 10px)}.nav a{font-size:11px}}
