/*
Theme Name: RAYVEN
Theme URI: https://rayvenmusic.com
Author: RAYVEN
Description: Custom theme for rayvenmusic.com
Version: 1.0
*/

:root{--sand:#b2afa1;--cream:#e9e5d8;--ink:#3a2f22;--black:#111;--line:#3a2f2255;--serif:'Newsreader',Georgia,serif;--sans:'Hanken Grotesk',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 16px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.sm{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.ul{border-bottom:1px solid currentColor;padding-bottom:2px}
.wrap{max-width:1240px;margin:auto;padding:0 5vw}
section{padding:96px 0}
h2{font:300 clamp(2.4rem,6vw,4.6rem)/1 var(--serif);text-transform:uppercase;letter-spacing:.06em;margin-bottom:44px}
.btn{display:inline-block;padding:15px 34px;background:var(--ink);color:var(--cream);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;border:1px solid var(--ink);cursor:pointer;font-family:var(--sans);transition:.25s}
.btn:hover{background:transparent;color:var(--ink)}.btn.l{background:var(--cream);color:var(--ink);border-color:var(--cream)}.btn.l:hover{background:transparent;color:var(--cream)}
/* top bar + nav */
.top{background:var(--black);color:#e9e5d8;display:flex;justify-content:space-between;align-items:center;padding:9px 5vw}
.soc{display:flex;gap:18px}.soc a{width:18px;height:18px;opacity:.8;transition:.2s}.soc a:hover{opacity:1;transform:translateY(-2px)}
.soc svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:20px 5vw;background:#b2afa1ee;backdrop-filter:blur(8px)}
nav .logo{font:400 1.5rem var(--serif);letter-spacing:.3em}
nav ul{display:flex;gap:30px;list-style:none}nav a:hover{opacity:.55}
/* current release page */
.rl{background:var(--cream);min-height:calc(100vh - 103px);display:flex;align-items:center;padding:50px 0}
.rl .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;width:100%}
.rl h1{font:300 clamp(3rem,8.5vw,7.5rem)/.95 var(--serif);text-transform:uppercase;letter-spacing:.03em;margin:14px 0 26px}
.rl p{max-width:400px;margin-bottom:32px}
.rl .fr{border:1px solid var(--ink);padding:14px;background:var(--cream);justify-self:center;width:min(100%,460px)}
.rl .fr img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%}
.rl .fr div{display:flex;justify-content:space-between;padding-top:12px}
.enter{display:inline-block;margin-left:26px}
@media(max-width:820px){.rl .wrap{grid-template-columns:1fr;gap:34px}.enter{display:block;margin:22px 0 0}}
/* hero */
.hero{background:var(--sand);position:relative;overflow:hidden;padding:0}
.hero:before{content:'';position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.stage{position:relative;height:min(88vh,860px);min-height:560px;max-width:1400px;margin:auto}
.ring{position:absolute;left:50%;top:50%;width:min(78vh,720px);aspect-ratio:1;border:1px solid #3a2f2222;border-radius:50%;transform:translate(-50%,-50%)}
.word{color:var(--ink);position:absolute;left:4vw;right:4vw;top:50%;transform:translateY(-52%);display:flex;justify-content:space-between;font:400 clamp(4.2rem,17vw,16.5rem)/1 var(--serif);}
.figure{position:absolute;left:59%;bottom:-1%;height:100%;transform:translateX(-50%);z-index:3;object-fit:contain;filter:drop-shadow(0 30px 30px #0003)}
.spec{position:absolute;z-index:4;font-size:.82rem}
.spec.a{left:5vw;top:14%}.spec.a li{list-style:none;margin-bottom:4px}.spec.b{right:12vw;top:14%;text-align:left}
.spec.c{left:20%;bottom:12%;font:400 1.2rem var(--sans)}.spec.d{right:5vw;bottom:10%;display:flex;align-items:center;gap:14px;text-align:right}
.spec.d i{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-style:normal}
.tag-line{position:absolute;z-index:4;left:5vw;bottom:10%}
/* releases (image 1) */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border:1px solid var(--ink)}
.rel a{border-right:1px solid var(--ink);display:block;transition:background .2s}.rel a:last-child{border:0}.rel a:hover{background:#d9d4c4}
.rel .cv{aspect-ratio:1;background:var(--sand);display:grid;place-items:center;font:300 3rem var(--serif);color:#3a2f2288;border-bottom:1px solid var(--ink)}
.rel img{width:100%;aspect-ratio:1;object-fit:cover;border-bottom:1px solid var(--ink)}
.rel .t{display:flex;justify-content:space-between;padding:14px 16px;font-size:.82rem}
.rows a{display:flex;justify-content:space-between;padding:15px 4px;border-top:1px solid var(--ink);font:300 1.4rem var(--serif);transition:padding .2s}
.rows a:last-child{border-bottom:1px solid var(--ink)}.rows a:hover{padding-left:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
/* spotify */
.spot{background:var(--sand)}.spot iframe{width:100%;height:352px;border:0;border-radius:12px}
/* video slideshow (image 2 black band) */
.vids{background:var(--black);color:var(--cream)}
.show{position:relative;overflow:hidden}.track{display:flex;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.slide{min-width:100%;padding:0 1px}
.frame{position:relative;aspect-ratio:16/9;background:#000 center/cover;cursor:pointer;overflow:hidden}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame .pl{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#0000,#0008)}
.frame .pl b{width:84px;height:84px;border-radius:50%;border:1px solid var(--cream);display:grid;place-items:center;font-size:1.3rem;transition:.25s;font-weight:400;padding-left:5px}
.frame:hover .pl b{background:var(--cream);color:var(--black)}
.ctl{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.ctl .cap{font:300 1.6rem var(--serif)}.ctl button{background:none;border:1px solid #e9e5d855;color:var(--cream);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.1rem;margin-left:8px;transition:.2s}.ctl button:hover{background:var(--cream);color:var(--black)}
.dots{display:flex;gap:8px;margin-top:16px}.dots i{width:28px;height:2px;background:#e9e5d844;cursor:pointer}.dots i.on{background:var(--cream)}
/* merch/about */
.merch{background:var(--sand);text-align:center}.merch h2{margin-bottom:18px}.merch p{margin-bottom:30px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about h2{margin-bottom:22px}.about .q{font:italic 300 1.7rem/1.3 var(--serif);margin-bottom:22px}.about p{margin-bottom:30px;max-width:520px}
.about img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cf{position:relative;height:min(120vw,680px);perspective:1500px;overflow:hidden;margin:0 -5vw}
.cf-s{position:absolute;inset:0;transform-style:preserve-3d}
.cf-i{position:absolute;left:50%;top:50%;width:min(62vw,380px);aspect-ratio:3/4;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s;cursor:pointer;box-shadow:0 30px 60px #3a2f2255;background:var(--sand)}
.cf-i img{width:100%;height:100%;object-fit:cover}
.cb{position:absolute;top:50%;z-index:200;width:50px;height:50px;border-radius:50%;border:1px solid var(--ink);background:var(--cream);color:var(--ink);cursor:pointer;font-size:1.1rem;transform:translateY(-50%);transition:.2s}.cb:hover{background:var(--ink);color:var(--cream)}.cb.p{left:4vw}.cb.n{right:4vw}
/* forms */
.band{background:var(--ink);color:var(--cream)}
.form{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.form .f{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;background:none;border:0;border-bottom:1px solid #e9e5d877;color:inherit;font:inherit;padding:12px 2px;outline:none;border-radius:0}
.form select option{color:#111}.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--cream)}
.form ::placeholder{color:#e9e5d899}
.msg{grid-column:1/-1;font-size:.9rem;min-height:1.4em}
.book{background:var(--sand)}.book .form input,.book .form select,.book .form textarea{border-color:#3a2f2299}.book .form ::placeholder{color:#3a2f22aa}.book .form select option{color:#111}
.book .form input:focus,.book .form textarea:focus,.book .form select:focus{border-color:var(--ink)}
.book .btn{justify-self:start}.band .btn{justify-self:start}
footer{background:var(--black);color:var(--cream);padding:70px 0 34px;text-align:center}
footer .big{font:300 clamp(3rem,16vw,13rem)/1 var(--serif);letter-spacing:.08em;margin-bottom:40px;color:#e9e5d8}
footer .soc{justify-content:center;margin-bottom:26px}footer small{display:block;opacity:.7;line-height:2;font-size:.78rem}
@media(max-width:820px){.figure{left:52%;height:68%}.word{top:40%}.spec.d{display:none}nav{flex-direction:column;gap:10px;padding:14px 5vw}nav ul{gap:16px;font-size:.62rem;flex-wrap:wrap;justify-content:center}.two,.about,.form{grid-template-columns:1fr}.spec.b,.spec.c{display:none}.stage{min-height:480px}section{padding:64px 0}.top .sm{display:none}.top{justify-content:center}}


:root{--sand:#b2afa1;--cream:#e9e5d8;--ink:#3a2f22;--black:#111;--line:#3a2f2255;--serif:'Newsreader',Georgia,serif;--sans:'Hanken Grotesk',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font:400 16px/1.6 var(--sans)}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}
.sm{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.ul{border-bottom:1px solid currentColor;padding-bottom:2px}
.wrap{max-width:1240px;margin:auto;padding:0 5vw}
section{padding:96px 0}
h2{font:300 clamp(2.4rem,6vw,4.6rem)/1 var(--serif);text-transform:uppercase;letter-spacing:.06em;margin-bottom:44px}
.btn{display:inline-block;padding:15px 34px;background:var(--ink);color:var(--cream);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;border:1px solid var(--ink);cursor:pointer;font-family:var(--sans);transition:.25s}
.btn:hover{background:transparent;color:var(--ink)}.btn.l{background:var(--cream);color:var(--ink);border-color:var(--cream)}.btn.l:hover{background:transparent;color:var(--cream)}
/* top bar + nav */
.top{background:var(--black);color:#e9e5d8;display:flex;justify-content:space-between;align-items:center;padding:9px 5vw}
.soc{display:flex;gap:18px}.soc a{width:18px;height:18px;opacity:.8;transition:.2s}.soc a:hover{opacity:1;transform:translateY(-2px)}
.soc svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
nav{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:20px 5vw;background:#b2afa1ee;backdrop-filter:blur(8px)}
nav .logo{font:400 1.5rem var(--serif);letter-spacing:.3em}
nav ul{display:flex;gap:30px;list-style:none}nav a:hover{opacity:.55}
/* hero */
.hero{background:var(--sand);position:relative;overflow:hidden;padding:0}
.hero:before{content:'';position:absolute;inset:0;opacity:.35;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.stage{position:relative;height:min(88vh,860px);min-height:560px;max-width:1400px;margin:auto}
.ring{position:absolute;left:50%;top:50%;width:min(78vh,720px);aspect-ratio:1;border:1px solid #3a2f2222;border-radius:50%;transform:translate(-50%,-50%)}
.word{color:var(--ink);position:absolute;left:4vw;right:4vw;top:50%;transform:translateY(-52%);display:flex;justify-content:space-between;font:400 clamp(4.2rem,17vw,16.5rem)/1 var(--serif);}
.figure{position:absolute;left:59%;bottom:-1%;height:100%;transform:translateX(-50%);z-index:3;object-fit:contain;filter:drop-shadow(0 30px 30px #0003)}
.spec{position:absolute;z-index:4;font-size:.82rem}
.spec.a{left:5vw;top:14%}.spec.a li{list-style:none;margin-bottom:4px}.spec.b{right:12vw;top:14%;text-align:left}
.spec.c{left:20%;bottom:12%;font:400 1.2rem var(--sans)}.spec.d{right:5vw;bottom:10%;display:flex;align-items:center;gap:14px;text-align:right}
.spec.d i{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--cream);display:grid;place-items:center;font-style:normal}
.tag-line{position:absolute;z-index:4;left:5vw;bottom:10%}
/* releases (image 1) */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));border:1px solid var(--ink)}
.rel a{border-right:1px solid var(--ink);display:block;transition:background .2s}.rel a:last-child{border:0}.rel a:hover{background:#d9d4c4}
.rel .cv{aspect-ratio:1;background:var(--sand);display:grid;place-items:center;font:300 3rem var(--serif);color:#3a2f2288;border-bottom:1px solid var(--ink)}
.rel img{width:100%;aspect-ratio:1;object-fit:cover;border-bottom:1px solid var(--ink)}
.rel .t{display:flex;justify-content:space-between;padding:14px 16px;font-size:.82rem}
.rows a{display:flex;justify-content:space-between;padding:15px 4px;border-top:1px solid var(--ink);font:300 1.4rem var(--serif);transition:padding .2s}
.rows a:last-child{border-bottom:1px solid var(--ink)}.rows a:hover{padding-left:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end}
/* spotify */
.spot{background:var(--sand)}.spot iframe{width:100%;height:352px;border:0;border-radius:12px}
/* video slideshow (image 2 black band) */
.vids{background:var(--black);color:var(--cream)}
.show{position:relative;overflow:hidden}.track{display:flex;transition:transform .6s cubic-bezier(.7,0,.2,1)}
.slide{min-width:100%;padding:0 1px}
.frame{position:relative;aspect-ratio:16/9;background:#000 center/cover;cursor:pointer;overflow:hidden}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.frame .pl{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(#0000,#0008)}
.frame .pl b{width:84px;height:84px;border-radius:50%;border:1px solid var(--cream);display:grid;place-items:center;font-size:1.3rem;transition:.25s;font-weight:400;padding-left:5px}
.frame:hover .pl b{background:var(--cream);color:var(--black)}
.ctl{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.ctl .cap{font:300 1.6rem var(--serif)}.ctl button{background:none;border:1px solid #e9e5d855;color:var(--cream);width:48px;height:48px;border-radius:50%;cursor:pointer;font-size:1.1rem;margin-left:8px;transition:.2s}.ctl button:hover{background:var(--cream);color:var(--black)}
.dots{display:flex;gap:8px;margin-top:16px}.dots i{width:28px;height:2px;background:#e9e5d844;cursor:pointer}.dots i.on{background:var(--cream)}
/* merch/about */
.merch{background:var(--sand);text-align:center}.merch h2{margin-bottom:18px}.merch p{margin-bottom:30px}
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about h2{margin-bottom:22px}.about .q{font:italic 300 1.7rem/1.3 var(--serif);margin-bottom:22px}.about p{margin-bottom:30px;max-width:520px}
.about img{width:100%;aspect-ratio:4/5;object-fit:cover}
.cf{position:relative;height:min(120vw,680px);perspective:1500px;overflow:hidden;margin:0 -5vw}
.cf-s{position:absolute;inset:0;transform-style:preserve-3d}
.cf-i{position:absolute;left:50%;top:50%;width:min(62vw,380px);aspect-ratio:3/4;transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s;cursor:pointer;box-shadow:0 30px 60px #3a2f2255;background:var(--sand)}
.cf-i img{width:100%;height:100%;object-fit:cover}
.cb{position:absolute;top:50%;z-index:200;width:50px;height:50px;border-radius:50%;border:1px solid var(--ink);background:var(--cream);color:var(--ink);cursor:pointer;font-size:1.1rem;transform:translateY(-50%);transition:.2s}.cb:hover{background:var(--ink);color:var(--cream)}.cb.p{left:4vw}.cb.n{right:4vw}
/* forms */
.band{background:var(--ink);color:var(--cream)}
.form{display:grid;gap:18px;grid-template-columns:1fr 1fr}
.form .f{grid-column:1/-1}
.form input,.form select,.form textarea{width:100%;background:none;border:0;border-bottom:1px solid #e9e5d877;color:inherit;font:inherit;padding:12px 2px;outline:none;border-radius:0}
.form select option{color:#111}.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--cream)}
.form ::placeholder{color:#e9e5d899}
.msg{grid-column:1/-1;font-size:.9rem;min-height:1.4em}
.book{background:var(--sand)}.book .form input,.book .form select,.book .form textarea{border-color:#3a2f2299}.book .form ::placeholder{color:#3a2f22aa}.book .form select option{color:#111}
.book .form input:focus,.book .form textarea:focus,.book .form select:focus{border-color:var(--ink)}
.book .btn{justify-self:start}.band .btn{justify-self:start}
footer{background:var(--black);color:var(--cream);padding:70px 0 34px;text-align:center}
footer .big{font:300 clamp(3rem,16vw,13rem)/1 var(--serif);letter-spacing:.08em;margin-bottom:40px;color:#e9e5d8}
footer .soc{justify-content:center;margin-bottom:26px}footer small{display:block;opacity:.7;line-height:2;font-size:.78rem}
@media(max-width:820px){.figure{left:52%;height:68%}.word{top:40%}.spec.d{display:none}nav{flex-direction:column;gap:10px;padding:14px 5vw}nav ul{gap:16px;font-size:.62rem;flex-wrap:wrap;justify-content:center}.two,.about,.form{grid-template-columns:1fr}.spec.b,.spec.c{display:none}.stage{min-height:480px}section{padding:64px 0}.top .sm{display:none}.top{justify-content:center}}

.admin-bar nav{top:32px}@media(max-width:782px){.admin-bar nav{top:46px}}
.entry{max-width:760px}.entry p{margin-bottom:1em}.entry a{border-bottom:1px solid currentColor}

.rv-builder{min-height:60vh}.rv-builder h1,.rv-builder h2,.rv-builder h3{font-family:var(--serif);text-transform:uppercase;letter-spacing:.04em;font-weight:300}

/* three-photo hero */
.hero .word{z-index:2;color:var(--cream)}
.hf{position:absolute;bottom:0;object-fit:contain;object-position:bottom;filter:drop-shadow(0 24px 24px #0003)}
.hf.l{left:1%;height:62%;z-index:1}
.hf.c{left:50%;transform:translateX(-50%);height:94%;z-index:1}
.hf.r{right:0;height:80%;z-index:1}
@media(max-width:820px){.hf.l{height:42%;left:-6%}.hf.r{height:50%;right:-8%}.hf.c{height:78%}}

.spec.d{left:5vw;right:auto;top:12%;bottom:auto;text-align:left;flex-direction:row-reverse}

/* video hero */
.hv{position:relative;height:calc(100vh - 103px);height:calc(100svh - 103px);min-height:520px;background:#111;overflow:hidden;color:var(--cream)}
.hv .poster,.hv video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hv iframe{position:absolute;left:50%;top:50%;width:max(100vw,calc(100vh*1.7778));height:max(100%,calc(100vw*.5625));transform:translate(-50%,-50%);border:0;pointer-events:none}
.hv:after{content:'';position:absolute;inset:0;background:linear-gradient(#0007,#0002 35%,#0009);pointer-events:none;z-index:1}
.hv .word{z-index:2;color:var(--cream);text-shadow:0 4px 40px #0006}
.hv .spec{color:var(--cream);z-index:4}
.hv .spec.d{left:auto;right:5vw;top:auto;bottom:8%;flex-direction:row-reverse;text-align:right}
.hv .spec.d i{background:var(--cream);color:var(--ink)}
.hv .spec.b{right:auto;left:5vw;top:12%}
.snd{position:absolute;z-index:4;left:5vw;bottom:8%;background:none;border:1px solid #e9e5d899;color:var(--cream);padding:11px 22px;border-radius:99px;cursor:pointer;font-family:var(--sans)}
.snd:hover{background:var(--cream);color:var(--ink)}
@media(max-width:820px){.hv{height:calc(100svh - 120px)}}

.hv .word{transform:translateY(calc(-52% - var(--ry,0px)));will-change:transform}

.hv .word{left:calc(50% + var(--wx,0vw));right:auto;width:var(--ww,92vw);font-size:clamp(3rem,var(--ws,17vw),22rem);transform:translate(-50%,calc(-52% + var(--wy,0vh) - var(--ry,0px)))}