/* ==========================================================
   BATLOP
   Editorial Layout
   ========================================================== */

:root{

--bg:#090909;

--text:#F3F2EE;

--muted:#86898d;

--line:rgba(255,255,255,.08);

--accent:#d9d7cf;

--max:1300px;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{

height:100%;

scroll-behavior:smooth;

}

body{

background:var(--bg);

color:var(--text);

font-family:"IBM Plex Sans",sans-serif;

min-height:100vh;

overflow:hidden;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

position:relative;

}


/*==========================================================

Canvas

==========================================================*/

#space{

position:fixed;

inset:0;

width:100%;

height:100%;

z-index:0;

}


/*==========================================================

Noise

==========================================================*/

#noise{

position:fixed;

inset:0;

pointer-events:none;

z-index:2;

opacity:.045;

background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");

mix-blend-mode:soft-light;

}


/*==========================================================

Layout

==========================================================*/

.layout{

position:relative;

z-index:5;

max-width:var(--max);

margin:auto;

min-height:100vh;

display:flex;

flex-direction:column;

justify-content:space-between;

padding:

44px

56px

42px

56px;

}


/*==========================================================

Header

==========================================================*/

header{

display:flex;

justify-content:space-between;

align-items:center;

}

.brand{

font-size:.82rem;

font-weight:600;

letter-spacing:.38em;

text-transform:uppercase;

}

.coordinates{

font-size:.72rem;

letter-spacing:.14em;

text-transform:uppercase;

color:var(--muted);

}


/*==========================================================

Hero

==========================================================*/

.hero{

max-width:760px;

margin-top:-40px;

}

.eyebrow{

display:flex;

align-items:center;

gap:16px;

margin-bottom:38px;

font-size:.72rem;

letter-spacing:.22em;

text-transform:uppercase;

color:var(--muted);

}

.eyebrow::before{

content:"";

width:42px;

height:1px;

background:var(--line);

}

.hero h1{

font-size:clamp(3.6rem,6vw,6.2rem);

line-height:.96;

font-weight:300;

letter-spacing:-.055em;

max-width:11ch;

margin-bottom:42px;

text-wrap:balance;

}

.hero p{

font-size:1.08rem;

line-height:2.1;

color:var(--muted);

max-width:480px;

}


/*==========================================================

Footer

==========================================================*/

footer{

display:flex;

justify-content:space-between;

align-items:flex-end;

padding-top:26px;

border-top:1px solid var(--line);

font-size:.72rem;

letter-spacing:.18em;

text-transform:uppercase;

color:var(--muted);

}

.status{

display:flex;

flex-direction:column;

align-items:flex-end;

gap:8px;

}

.status span{

color:var(--text);

font-weight:500;

letter-spacing:.28em;

}


/*==========================================================

Selection

==========================================================*/

::selection{

background:#ffffff22;

color:#fff;

}


/*==========================================================

Scrollbar

==========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#090909;

}

::-webkit-scrollbar-thumb{

background:#2b2b2b;

}

::-webkit-scrollbar-thumb:hover{

background:#444;

}


/*==========================================================

Reveal

==========================================================*/

.brand,
.coordinates,
.eyebrow,
.hero h1,
.hero p,
footer{

opacity:0;

transform:translateY(10px);

animation:fade .9s forwards;

}

.coordinates{

animation-delay:.15s;

}

.eyebrow{

animation-delay:.25s;

}

.hero h1{

animation-delay:.45s;

}

.hero p{

animation-delay:.75s;

}

footer{

animation-delay:1s;

}

@keyframes fade{

to{

opacity:1;

transform:none;

}

}


/*==========================================================

Responsive

==========================================================*/

@media(max-width:900px){

.layout{

padding:34px;

}

.hero{

margin-top:0;

}

.hero h1{

font-size:3.2rem;

max-width:100%;

}

footer{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.status{

align-items:flex-start;

}

.coordinates{

display:none;

}

}


/*==========================================================

Reduced Motion

==========================================================*/

@media (prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

}

}