/*
==========================================================================
MYLUMIUM light art.
========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400&family=Roboto:wght@300;400;500&display=swap');

*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html {font-size: 18px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;}
body {font-family: 'Roboto', sans-serif; line-height: 1.6; color: #fff; background: #000; overflow-x: hidden;}
h1,h2,h3,h4,h5,h6 {font-weight: 700; line-height: 1.2; margin-bottom: 1rem;}
p {margin-bottom: 1rem;}
a {color: #fff; text-decoration: none;}
img {max-width: 100%; height: auto; display: block;}
ul, ol {list-style: none;}
input, textarea, button, select {font-family: inherit; font-size: inherit; line-height: inherit;}
button {cursor: pointer; border: none; background: transparent; color: inherit;}
:focus-visible {outline: 2px solid #fff; outline-offset: 2px;}

.my {
position: relative;
min-height: 100vh;
overflow: hidden;
}

.my-media {
position: absolute;
inset: 0;
z-index: 5;
}

.my-media video,
.my-media img,
.my-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

.my-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.5s ease;
}
.my-slide-active {opacity: 1; z-index: 1;}

.my-placeholder {
width: 100%;
height: 100%;
background: #1a1a1a;
}

.my-media.craft-grid {display: grid; grid-template-columns: repeat(4, 1fr);}
.my-media.craft-grid img {width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.5);}

.my-content {
position: absolute;
inset: 0;
z-index: 10;
padding: 6rem 4.8rem;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.my-content * {pointer-events: auto;}

.my-heading {
margin: 0;
font-family: 'Playfair Display', serif;
font-size: clamp(2.96rem, 6vw, 3.95rem);
font-weight: 400;
}

.my-text {
font-size: 1.25rem;
font-weight: 300;
max-width: 45.2rem;
}

.my-button {
display: inline-block;
margin-top: 2rem;
padding: 0.75rem 1.5rem;
border: 1px solid #fff;
background: rgba(0,0,0,0.3);
}

.my-note {
display: block;
margin-top: auto;
font-size: 0.94rem;
color: #999;
text-align: right;
align-self: flex-end;
}

.my-list {margin: 1.6rem 0 0; max-width: 45.2rem;}
.my-list li {margin-bottom: 0.75rem;}
.my-list h3 {font-size: 1.25rem; font-weight: 400; margin: 0; line-height: 1.5;}

.button-text {font-weight: 500;}
.light {font-weight: 300;}

/* Bucket modifiers — add single class to element */
.my-content.nw {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left;}
.my-content.ne {display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; text-align: right;}
.my-content.sw {justify-content: flex-end;}
.my-content.sw .my-note {margin-top: 1rem;}
.my-content.se {display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-end; text-align: right;}
.reversed {color: #000;}
.reversed a, .reversed .my-button {color: #000; border-color: #000;}
.reversed .my-button {background: rgba(255,255,255,0.3);}
.reversed .my-note {color: #666;}
.dim {position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,0.4);}
.dark {position: absolute; inset: 0; z-index: 6; background: rgba(0,0,0,0.7);}

.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
background: transparent;
transition: background 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 2rem;
}
.site-header .logo {
font-family: 'Playfair Display', serif;
font-size: 1.67rem;
text-transform: uppercase;
}
.site-header .logo-slogan {font-size: 0.94rem; color: #999;}
.site-header.scrolled {background: rgba(0,0,0,0.7);}

.main-navigation ul {display: flex; gap: 2rem;}
.main-navigation .nav-link {font-size: 0.94rem;}

.mobile-menu-toggle {display: none; padding: 0.5rem; background: transparent;}
.mobile-menu-toggle .toggle-icon {
display: block;
width: 1.5rem;
height: 2px;
background: #fff;
position: relative;
}
.mobile-menu-toggle .toggle-icon::before,
.mobile-menu-toggle .toggle-icon::after {
content: '';
position: absolute;
left: 0;
width: 1.5rem;
height: 2px;
background: #fff;
}
.mobile-menu-toggle .toggle-icon::before {top: -8px;}
.mobile-menu-toggle .toggle-icon::after {top: 8px;}

.footer {position: relative; width: 100%;}

.foot-cta {
min-height: 100vh;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}

.foot-cta-bg {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.foot-cta-bg video {width: 100%; height: 100%; object-fit: cover;}
.foot-cta-overlay {position: absolute; inset: 0; background: rgba(0,0,0,.7);}

.foot-cta .my-content {display: flex; flex-direction: column; align-items: center; text-align: center;}
.foot-logo {width: 24rem; height: auto; margin-bottom: 2rem;}

.foot-main {
position: relative;
z-index: 1;
background: #0a0a0a;
padding: 3rem 2rem;
width: 100%;
}

.foot-row {display: flex; flex-wrap: wrap; gap: 3rem; margin-bottom: 2rem; align-items: flex-start;}
.foot-row > div {flex: 1; min-width: 200px;}

.foot-brand {width: 6rem; height: auto; margin-bottom: 1.5rem; filter: invert(1);}

.foot-contact {font-size: 0.94rem; display: flex; flex-direction: column;}
.foot-social {display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;}
.foot-contact .icon {width: 20px; height: 20px; flex-shrink: 0;}
.foot-contact .icon.discord {width: 27px; height: 27px;}

.foot-nav {display: flex; align-items: center;}
.foot-nav .foot-link {font-size: 0.94rem;}

.foot-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
justify-content: flex-end;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #333;
}
.foot-copy {margin: 0; font-size: 0.94rem; color: #999;}
.foot-legal .foot-link {font-size: 0.94rem; color: #999;}
.foot-legal .foot-link:hover {color: #fff;}

@media (max-width: 768px) {
.site-header {padding: 1rem;}

.main-navigation {display: none;}
.main-navigation.is-open {
display: block;
position: absolute;
top: 100%; left: 0; right: 0;
background: #0a0a0a;
padding: 1rem;
}
.main-navigation.is-open .nav-list {flex-direction: column;}
.main-navigation.is-open .nav-link {display: block; padding: 1rem;}
.mobile-menu-toggle {display: block;}

.my-content {padding: 4rem 2rem;}
.my-heading {font-size: clamp(1.67rem, 4vw, 2.22rem);}
.my-text,
.my-list h3 {font-size: 1.25rem;}

.foot-contact {font-size: 0.94rem;}
.foot-nav .foot-link {font-size: 0.94rem;}
.foot-copy, .foot-legal .foot-link {font-size: 0.94rem;}

.foot-row {flex-direction: column;}
.foot-legal {justify-content: flex-start;}
.foot-main {padding: 2rem 1rem;}
}