:root{

--gold:#b89057;
--gold-light:#d6b882;

--panel:#111111ee;

--text:#d8c7a2;

--border:rgba(184,144,87,.25);

}

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

body{

font-family:'Cormorant Garamond',serif;

color:var(--text);

background:
linear-gradient(rgba(4,4,4,.85),rgba(4,4,4,.85)),
url("https://radrians.neocities.org/szałasy.jpg");

background-size:cover;
background-position:center;
background-attachment:fixed;

overflow-x:hidden;
}

/* SIDE DECORATIONS */

.side-decoration{

    position:fixed;
    top:50%;
    transform:translateY(-50%);
    z-index:100;

    color:#c59b59;
    font-size:1.4rem;
    line-height:2.2;
    text-align:center;

    opacity:.8;

    pointer-events:none;

    text-shadow:0 0 6px rgba(255,186,74,.4);
}

.left-decoration{ left:25px; }
.right-decoration{ right:25px; }


/* FRAME */

.side-border{

position:fixed;

top:0;
bottom:0;

width:110px;

z-index:1;

pointer-events:none;
}

.left{

left:0;

border-right:1px solid var(--border);

background:
linear-gradient(
to right,
rgba(184,144,87,.10),
transparent);
}

.right{

right:0;

border-left:1px solid var(--border);

background:
linear-gradient(
to left,
rgba(184,144,87,.10),
transparent);
}

.corner{

position:fixed;

width:90px;
height:90px;

border:1px solid rgba(184,144,87,.2);

z-index:1;

pointer-events:none;
}

.tl{
top:15px;
left:15px;
}

.tr{
top:15px;
right:15px;
}

.bl{
bottom:15px;
left:15px;
}

.br{
bottom:15px;
right:15px;
}

/* PAGE */

.page{

max-width:1400px;

margin:auto;

padding:30px;

position:relative;

z-index:2;
}

/* HEADER */

header{

display:flex;

justify-content:space-between;

align-items:center;

padding-bottom:25px;

border-bottom:1px solid var(--border);
}

.logo{

display:flex;

gap:15px;

align-items:center;
}

.logo-symbol{

font-size:40px;

color:var(--gold);
}

.logo h1{

font-family:'Cinzel',serif;

font-size:42px;

letter-spacing:5px;
}

.logo span{

letter-spacing:4px;

font-size:12px;
}

nav ul{

display:flex;

gap:28px;

list-style:none;
}

nav a{

text-decoration:none;

color:var(--text);

font-family:'Cinzel',serif;

font-size:14px;

letter-spacing:2px;

transition:.3s;
}

nav a:hover{

color:var(--gold-light);
}

.dropdown{

position:relative;
}

.submenu{

position:absolute;

top:100%;

left:0;

background:#111;

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

display:none;

min-width:220px;
}

.submenu li{

display:block;
}

.submenu a{

display:block;

padding:12px;
}

.dropdown:hover .submenu{

display:block;
}

.nav-icons{

display:flex;

gap:10px;
}

.nav-icons button{

background:none;

border:1px solid var(--gold);

color:var(--gold);

padding:10px;

cursor:pointer;
}

/* HERO */

.hero{

    position:relative;

    min-height:650px;

    margin-top:25px;

    border:0px solid rgba(184,144,87,.25);

    overflow:hidden;

    background:

    url("https://radrians.neocities.org/the%20hunt.jpg");

    background-size:cover;
    background-position:center;
}

/* DARK OVERLAY */

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        to right,
        rgba(5,5,5,.92) 0%,
        rgba(5,5,5,.82) 0%,
        rgba(5,5,5,.72) 35%,
        rgba(5,5,5,.88) 90%
    );

    z-index:1;
}

/* LARGE DECORATIVE CIRCLE */

.hero-circle{

    position:absolute;

    width:650px;
    height:650px;

    left:-120px;
    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    border:1px solid rgba(184,144,87,.18);

    z-index:2;
}

.hero-circle::before{

    content:"";

    position:absolute;

    inset:35px;

    border-radius:50%;

    border:1px solid rgba(184,144,87,.12);
}

.hero-circle::after{

    content:"";

    position:absolute;

    inset:70px;

    border-radius:50%;

    border:1px solid rgba(184,144,87,.08);
}

/* CONTENT */

.hero-content{

    position:relative;

    z-index:3;

    width:520px;

    padding:

    90px
    70px;

}

.hero-small{

    display:block;

    font-family:'Cinzel',serif;

    letter-spacing:8px;

    margin-bottom:15px;

    font-size:14px;

    color:#c7a770;
}

.hero-content h2{

    font-family:'Cinzel',serif;

    font-size:110px;

    line-height:.9;

    margin-bottom:25px;

    color:#e2c48f;

    text-shadow:
    0 0 25px rgba(0,0,0,.4);
}

.hero-content h3{

    font-family:'Cinzel',serif;

    font-size:26px;

    font-weight:400;

    line-height:1.6;

    letter-spacing:2px;

    margin-bottom:20px;

    color:#d2b681;
}

.hero-divider{

    width:250px;

    height:1px;

    background:#b89057;

    position:relative;

    margin-bottom:25px;
}

.hero-divider::before{

    content:"◈";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    top:-11px;

    color:#b89057;

    background:#111;

    padding:0 8px;
}

.hero-content p{

    font-size:22px;

    line-height:1.8;

    color:#c6b18a;
}

/* BUTTON */

.hero-button{

    display:inline-block;

    margin-top:35px;

    padding:

    16px
    38px;

    border:1px solid #b89057;

    color:#b89057;

    text-decoration:none;

    font-family:'Cinzel',serif;

    letter-spacing:1px;

    transition:.35s;
}

.hero-button:hover{

    background:#b89057;

    color:black;
}

/* RESPONSIVE */

@media(max-width:900px){

    .hero{

        min-height:auto;
    }

    .hero-content{

        width:auto;

        padding:60px 35px;
    }

    .hero-content h2{

        font-size:70px;
    }

    .hero-circle{

        width:450px;
        height:450px;
    }

}

/* LEFT PANEL */

.intro-panel{

display:flex;

flex-direction:column;

justify-content:center;

padding:20px;
}

.intro-small{

font-family:'Cinzel',serif;

letter-spacing:6px;

font-size:14px;

margin-bottom:15px;
}

.intro-panel h2{

font-family:'Cinzel',serif;

font-size:110px;

line-height:.9;

margin-bottom:20px;

color:#e0c08c;
}

.intro-panel h3{

font-family:'Cinzel',serif;

font-weight:400;

font-size:28px;

line-height:1.5;

letter-spacing:2px;

margin-bottom:20px;
}

.divider{

width:220px;

height:1px;

background:var(--gold);

margin-bottom:25px;

position:relative;
}

.divider::after{

content:"◈";

position:absolute;

left:50%;

top:-11px;

transform:translateX(-50%);

background:#111;

padding:0 10px;

color:var(--gold);
}

.intro-panel p{

font-size:23px;

line-height:1.8;

color:#c4b08a;
}

/* BUTTON */

.main-button{

display:inline-block;

margin-top:35px;

padding:18px 40px;

border:1px solid var(--gold);

text-decoration:none;

font-family:'Cinzel',serif;

color:var(--gold);

width:max-content;

transition:.3s;
}

.main-button:hover{

background:var(--gold);

color:black;
}

/* RIGHT PANEL */

.hero-art{

position:relative;

display:flex;

align-items:center;

justify-content:center;
}

.radrian-showcase{

width:100%;

height:100%;

min-height:520px;

border:1px solid rgba(184,144,87,.2);

background:

linear-gradient(
rgba(0,0,0,.2),
rgba(0,0,0,.2)
),

url("https://radrians.neocities.org/the%20hunt.jpg");

background-size:cover;
background-position:center;

position:relative;
}

/* compass decoration */

.radrian-showcase::before{

content:"";

position:absolute;

width:250px;
height:250px;

left:-80px;
bottom:-80px;

border-radius:50%;

border:1px solid rgba(184,144,87,.25);
}

/* decorative glow */

.radrian-showcase::after{

content:"";

position:absolute;

inset:0;

background:

radial-gradient(
circle at center,
rgba(184,144,87,.12),
transparent 65%
);
}
/* ARCHIVE BAR */

.archive-nav{

display:grid;

grid-template-columns:repeat(6,1fr);

gap:15px;

margin-top:25px;
}

.archive-card{

background:var(--panel);

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

padding:25px;

text-align:center;

text-decoration:none;

color:var(--text);

transition:.3s;
}

.archive-card:hover{

transform:translateY(-6px);

border-color:var(--gold);
}

.icon{

font-size:28px;

color:var(--gold);

margin-bottom:10px;
}

.archive-card h4{

font-family:'Cinzel',serif;

margin-bottom:10px;
}

/* MAIN GRID */

.main-grid{

display:grid;

grid-template-columns:1fr 1.5fr 1fr;

gap:20px;

margin-top:25px;
}

.about-panel,
.showcase-panel,
.discoveries{

background:var(--panel);

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

padding:30px;
}

.about-panel h2,
.discoveries h2{

font-family:'Cinzel',serif;

margin-bottom:25px;
}

.about-item{

margin-bottom:25px;
}

.about-item h3{

margin-bottom:10px;

color:var(--gold-light);
}

.about-item p{

font-size:20px;

line-height:1.6;
}

.showcase-image{

height:500px;

background:
linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),
url("https://radrians.neocities.org/chcesz%20hotdoga%20znak%20zapytania.jpg");

background-size:cover;
background-position:center;

border:1px solid rgba(184,144,87,.2);
}

.discovery{

padding:18px;

border:1px solid rgba(184,144,87,.15);

margin-bottom:15px;

transition:.3s;
}

.discovery:hover{

border-color:var(--gold);

transform:translateX(5px);
}

.discovery h3{

margin-bottom:6px;

color:var(--gold-light);
}

/* FOOTER */

footer{

text-align:center;

padding:50px 0;

margin-top:25px;

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

font-family:'Cinzel',serif;

letter-spacing:3px;
}

/* RESPONSIVE */

@media(max-width:1200px){

.archive-nav{
grid-template-columns:repeat(3,1fr);
}

.main-grid{
grid-template-columns:1fr;
}

.hero h2{
font-size:80px;
}

}

@media(max-width:768px){

header{
flex-direction:column;
gap:20px;
}

nav ul{
flex-wrap:wrap;
justify-content:center;
}

.archive-nav{
grid-template-columns:1fr;
}

.hero{
padding:60px 25px;
}

.hero h2{
font-size:55px;
}

.hero h3{
font-size:24px;
}

.description{
font-size:20px;
}

.side-border{
display:none;
}

}