@import "tailwindcss";
:root{--paper:#f4eee5;--muted:#b8b5ae;--night:#0c1212;--sage:#a8c9b2;--gold:#dfb978}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--night);color:var(--paper);font-family:Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}header{position:fixed;z-index:20;inset:0 0 auto;height:76px;padding:0 6vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#071010e8,transparent);backdrop-filter:blur(5px)}.brand{display:flex;align-items:center;gap:10px;font:22px Georgia,serif}.brand b{display:grid;place-items:center;width:35px;height:35px;border:1px solid var(--sage);border-radius:50%;color:var(--sage);font-style:italic}nav{display:flex;align-items:center;gap:25px;font-size:13px}nav>a:not(.yt){opacity:.75}nav a:hover{opacity:1;color:var(--sage)}.yt,.primary{padding:13px 20px;border-radius:40px;background:var(--paper);color:#14201d;font-weight:bold}.menu{display:none;background:none;border:0;color:white;font-size:25px}.hero{height:100vh;min-height:650px;position:relative;display:flex;align-items:flex-end;overflow:hidden}.heroImg{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1.04);transition:opacity 1s,transform 4s}.heroImg.active{opacity:1;transform:scale(1)}.hero1{background-image:url('images/hero-focus.png')}.hero2{background-image:url('images/hero-nature.png')}.hero3{background-image:url('images/hero-meditation.png')}.shade{position:absolute;inset:0;background:linear-gradient(90deg,#06100fdb,#06100f20 75%),linear-gradient(0deg,#0c1212,transparent 35%)}.heroText{position:relative;z-index:2;padding:0 8vw 12vh;max-width:870px}.eyebrow{font-size:11px;font-weight:bold;letter-spacing:.25em;color:var(--sage)}h1,h2{font-family:Georgia,serif;line-height:.96;letter-spacing:-.04em;margin:18px 0}h1{font-size:clamp(55px,8vw,105px)}h2{font-size:clamp(43px,5vw,72px)}em{color:var(--gold);font-weight:normal}.heroText>p:not(.eyebrow){max-width:590px;color:#ddd9d0;font-size:18px;line-height:1.7}.actions{display:flex;align-items:center;gap:30px;margin-top:30px}.primary{border:0;cursor:pointer;display:inline-block}.actions>a:last-child,.about a,.contact>div>a{color:var(--sage);font-weight:bold}.dots{position:absolute;z-index:3;right:7vw;bottom:8vh;display:flex;gap:8px}.dots button{width:35px;height:3px;padding:0;border:0;background:#fff5}.dots button.active{background:var(--gold)}.section{padding:110px 7vw;scroll-margin-top:55px}.sectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:45px}.sectionHead>p{max-width:420px;color:var(--muted);line-height:1.7}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{aspect-ratio:4/5;border-radius:3px;padding:20px;position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background:#23332f}.card:before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 70% 25%,var(--c1,#9e845f),transparent 35%),linear-gradient(150deg,var(--c2,#243d36),#080d0d 85%);transition:.5s}.card:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#050a0af5,transparent 68%)}.card:hover:before{transform:scale(1.08)}.card>span{font-size:11px;color:#fff8}.card>i{align-self:flex-end;width:46px;height:46px;display:grid;place-items:center;border:1px solid #fff8;border-radius:50%;font-style:normal;font-size:12px}.card p{font-size:12px;color:#ffffffaa}.card h3{font:25px Georgia,serif;margin:7px 0 15px}.card small{color:var(--sage);letter-spacing:.1em}.jazz{--c1:#c98b49;--c2:#5b2f27}.rain{--c1:#577a8a;--c2:#212b44}.nature{--c1:#79a46f;--c2:#17372e}.winter{--c1:#d7d6cb;--c2:#526b76}.meditation{--c1:#b47664;--c2:#362e4a}.sleep{--c1:#4d6092;--c2:#191c38}.journey{--c1:#ba8f63;--c2:#314344}.custom{background:#e9e3d8;color:#16201e;display:grid;grid-template-columns:.85fr 1.15fr;gap:9vw}.custom .eyebrow{color:#567666}.custom>div>p:not(.eyebrow){line-height:1.8;color:#525b58}.custom aside{border-top:1px solid #aaa;margin-top:40px;padding-top:20px;display:flex;flex-direction:column;gap:8px}.custom aside span,form>small{font-size:12px;color:#6a716f}form{display:flex;flex-direction:column;gap:20px}.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:flex;flex-direction:column;gap:8px;font-size:11px;font-weight:bold;letter-spacing:.07em;text-transform:uppercase}input,select,textarea{width:100%;background:transparent;color:inherit;border:0;border-bottom:1px solid #aaa;padding:12px 3px;outline:none;border-radius:0}textarea{border:1px solid #aaa;padding:13px;resize:vertical}.check{flex-direction:row;align-items:start;text-transform:none;letter-spacing:0;font-weight:normal}.check input{width:auto}.custom .primary,.contact .primary{align-self:flex-start;background:#17372e;color:white}.about{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:9vw}.aboutArt{height:540px;display:grid;place-items:center;background:radial-gradient(circle,#809589 0 7%,#2d443d 8% 22%,#172a24 23% 44%,#0b1210 45%)}.aboutArt span{text-align:center;font:italic 30px/1.7 Georgia,serif}.about>div:last-child>p:not(.eyebrow),.contact>div>p:not(.eyebrow){color:var(--muted);line-height:1.8}.contact{background:#121b19;display:grid;grid-template-columns:.8fr 1.2fr;gap:10vw}.contact input,.contact textarea{border-color:#5a6662}footer{padding:45px 7vw;border-top:1px solid #ffffff1b;display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:25px;color:var(--muted)}footer div{display:flex;gap:20px;font-size:12px}footer small{grid-column:1/-1;color:#777}
@media(max-width:980px){nav{display:none;position:absolute;top:70px;left:4vw;right:4vw;padding:25px;background:#101817;flex-direction:column;align-items:flex-start}nav.open{display:flex}.menu{display:block}.grid{grid-template-columns:repeat(2,1fr)}.custom,.about,.contact{grid-template-columns:1fr}.sectionHead{align-items:flex-start;flex-direction:column}.aboutArt{height:420px}footer{grid-template-columns:1fr}}
@media(max-width:600px){header{height:66px}.hero{min-height:700px}.heroText{padding:0 6vw 14vh}h1{font-size:52px}.actions{align-items:flex-start;flex-direction:column;gap:18px}.dots{left:6vw;right:auto}.section{padding:80px 6vw}.grid{grid-template-columns:1fr}.card{aspect-ratio:6/5}.row{grid-template-columns:1fr}.aboutArt{height:340px}footer{display:flex;align-items:flex-start;flex-direction:column}footer div{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.heroImg,.card:before{transition:none}}

/* Light Serelyth theme */
:root{--paper:#fffdf9;--muted:#64706b;--night:#fffdf9;--sage:#557a69;--gold:#b7823e}
body{background:var(--night);color:#17231f}
.hero{color:#fff}.hero h1{color:#fff}.hero .primary{background:#fff;color:#17372e}
header{background:#fffdf9ed;color:#17231f;border-bottom:1px solid #17231f16;backdrop-filter:blur(12px)}
.menu{color:#17231f}.yt,.primary{background:#17372e;color:#fff}.sectionHead h2,.about h2{color:#17231f}
.card{border-radius:8px;background:#edf1ed;color:#fff;box-shadow:0 12px 35px #1d30231c}
.card:before{background-image:var(--image);background-size:cover;background-position:center}
.card:after{background:linear-gradient(0deg,#06100fed 0%,#06100f8c 34%,transparent 72%)}
.focus{--image:url('images/cards/deep-focus.png')}.jazz{--image:url('images/cards/cozy-jazz.png')}.rain{--image:url('images/cards/rainy-cities.png')}.nature{--image:url('images/cards/healing-nature.png')}.winter{--image:url('images/cards/winter-ambience.png')}.meditation{--image:url('images/cards/meditation.png')}.sleep{--image:url('images/cards/deep-sleep.png')}.journey{--image:url('images/cards/scenic-journeys.png')}
.about{background:#fff}.contact{background:#eef3ef;color:#17231f}.contact .eyebrow,.contact>div>a{color:#557a69}
footer{background:#fff;color:#64706b;border-top:1px solid #17231f18}
@media(max-width:980px){nav{background:#fffdf9;color:#17231f;box-shadow:0 16px 40px #16251c1c}}

/* Transparent hero navigation */
header{background:linear-gradient(180deg,rgba(5,14,13,.78),rgba(5,14,13,.22),transparent);color:#fff;border-bottom:0;backdrop-filter:none}
header .brand,header nav>a:not(.yt){color:#fff}
header .brand b{color:#b9d7c4;border-color:#b9d7c4}
.menu{color:#fff}
@media(max-width:980px){nav{background:#fffdf9;color:#17231f;box-shadow:0 16px 40px #16251c1c}header nav.open>a:not(.yt){color:#17231f}}

/* About Serelyth image */
.aboutArt{height:auto;aspect-ratio:6/5;background:url('images/about-serelyth.png') center/cover no-repeat;border-radius:3px;box-shadow:0 18px 45px rgba(23,55,46,.12)}
.aboutArt span{display:none}
@media(max-width:980px){.aboutArt{height:auto;aspect-ratio:6/5}}
@media(max-width:600px){.aboutArt{height:auto;aspect-ratio:6/5}}