/* =========================
   GLOBAL RESET
========================= */

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

body{

font-family:'Inter',sans-serif;

/* Temple inspired gradient */

background:
radial-gradient(
circle at center,
#fff7e8 0%,
#f5e6c8 45%,
#ead7b0 70%,
#e0caa0 100%
);

color:#5a4a2a;

min-height:100vh;

}


/* =========================
   NAVBAR
========================= */

.nav{

display:flex;
justify-content:space-between;
align-items:center;

padding:30px 6vw;

font-size:14px;

}

.brand{

letter-spacing:1px;
color:#b68b2e;
font-weight:500;

}

.nav-links a{

margin-left:30px;

text-decoration:none;

color:#7a6845;

transition:0.25s;

}

.nav-links a:hover{

color:#b68b2e;

}


/* =========================
   HERO SECTION
========================= */

.hero{

min-height:80vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

position:relative;

padding:0 20px;

}


/* =========================
   TEMPLE HALO LIGHT
========================= */

.hero::before{

content:"";

position:absolute;

width:min(70vw,520px);
height:min(70vw,520px);

background:radial-gradient(
circle,
rgba(255,210,120,0.45),
rgba(255,210,120,0.2),
transparent 70%
);

filter:blur(80px);

z-index:-1;

}


/* =========================
   MAIN LOGO TITLE
========================= */

.title{

font-family:'Allura', cursive;

/* responsive logo size */

font-size:clamp(56px,12vw,120px);

margin-bottom:14px;

letter-spacing:2px;


/* gold gradient */

background:linear-gradient(
145deg,
#7a5a16 0%,
#caa84a 25%,
#fff4c2 45%,
#caa84a 65%,
#7a5a16 100%
);

background-size:200% 200%;

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;


/* depth */

text-shadow:
0 2px 2px rgba(0,0,0,0.15),
0 4px 10px rgba(0,0,0,0.2),
0 0 18px rgba(202,168,74,0.45);

}


/* =========================
   COMING SOON TEXT
========================= */

.coming{

font-size:12px;

letter-spacing:5px;

color:#8a6a1e;

text-transform:uppercase;

margin-top:4px;

}


/* =========================
   MOBILE OPTIMISATION
========================= */

@media (max-width:768px){

.nav{

padding:20px 24px;

}

.nav-links a{

margin-left:18px;

font-size:13px;

}

.brand{

font-size:14px;

}

.coming{

font-size:11px;

letter-spacing:3px;

}

.hero{

min-height:75vh;

}

}