/* Unified CSS for Alex Ashing Portfolio */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#C9A84C;--gold-light:#E8C97A;--gold-dim:rgba(201,168,76,0.18);
  --dark:#080705;--dark2:#0E0C08;
  --text:#F0EAD6;--text-muted:#8A8470;--text-dim:#3E3B2E;
  --border:rgba(201,168,76,0.12);--border-hi:rgba(201,168,76,0.45);
  --music-accent:#C9A84C;
  --visual-accent:#6BA8A4;
  --tech-accent:#8C9AA8;
  --music:#C9A84C;
  --music-dim:rgba(201,168,76,.5);
  --visual:#6BA8A4;
  --visual-dim:rgba(107,168,164,.5);
  --tech:#C84B4B;
  --tech-dim:rgba(200,75,75,.5);
  --about:#7A8CFF;
  --about-dim:rgba(122,140,255,.5);
}
html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--dark);color:var(--text);overflow-x:hidden;font-size:15px;line-height:1.7}

/* NAV */
nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:200;
  background:rgba(8,7,5,0.7);
  backdrop-filter:blur(16px);
  border-bottom:0.5px solid var(--border);
}
.nav-inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:1.25rem 3rem;
}
.nav-left{justify-self:start}
.nav-right{justify-self:end}
.nav-logo{
  font-family:'Playfair Display',serif;
  font-size:1.15rem;
  color:var(--gold);
  letter-spacing:.04em;
}
.nav-center{
  display:flex;
  gap:2.5rem;
  list-style:none;
}
.nav-center a{
  text-decoration:none;
  font-size:.75rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:color .25s ease;
}
.nav-music{color:var(--music-dim);}
.nav-visual{color:var(--visual-dim);}
.nav-tech{color:var(--tech-dim);}
.nav-about{color:var(--about-dim);}
.nav-music:hover{color:var(--music);}
.nav-visual:hover{color:var(--visual);}
.nav-tech:hover{color:var(--tech);}
.nav-about:hover{color:var(--about);}
.nav-center a.active{color:var(--text);}
.nav-back{
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-dim);
  text-decoration:none;
}
.nav-back:hover{color:var(--text-muted);}

/* Responsive Design */
@media (max-width: 768px) {
  .nav-inner{padding:1.25rem 1.5rem;}
  .nav-center{gap:1.5rem;}
  .hero-content{padding:0 1.5rem 4.5rem;}
  .tiles-grid{grid-template-columns:1fr;height:auto;}
  .tile{min-height:300px;}
  .brief{grid-template-columns:1fr;gap:3rem;padding:4rem 1.5rem;}
  .contact-bar{flex-direction:column;gap:2rem;padding:2rem 1.5rem;text-align:center;}
  .footer{flex-direction:column;gap:1rem;text-align:center;}
}

@media (max-width: 480px) {
  .nav-center{gap:1rem;}
  .nav-center a{font-size:.65rem;}
  .hero-h1{font-size:clamp(2.5rem,8vw,4rem);}
  .tile{padding:1.5rem;}
  .brief{padding:3rem 1rem;}
}