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

:root{
  --navy:#0a0a0a;
  --cream:#ffffff;
  --blue:#1246d6;
  --yellow:#1246d6;
  --white:#ffffff;
  --lufga:'Lufga',sans-serif;
  /* Typography scale */
  --base-size:16px;
  --scale-ratio:1.2;
  --type-xxl:clamp(2.2rem,4.8vw,4.5rem);
  --type-xl:clamp(1.6rem,3.6vw,3rem);
  --type-lg:clamp(1.25rem,2.6vw,1.6rem);
  --type-md:1rem;
  --type-sm:0.88rem;
}

html{scroll-behavior:smooth}

body{
  font-family:var(--lufga);
  background:var(--navy);
  color:var(--cream);
  font-weight:300;
  line-height:1.7;
}

html{font-size:var(--base-size)}

/* Headings */
h1{font-size:var(--type-xxl);line-height:1.05;margin:0 0 0.6rem;font-weight:300}
h2{font-size:var(--type-xl);line-height:1.08;margin:0 0 0.6rem;font-weight:300}
h3{font-size:var(--type-lg);line-height:1.1;margin:0 0 0.5rem;font-weight:400}
p,li{font-size:var(--type-md)}

/* Container padding responsive */
.container{padding-left:clamp(1rem,4vw,3rem);padding-right:clamp(1rem,4vw,3rem)}

body::before{
  content:'';
  position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:0;opacity:0.4;
}

/* NAV */
nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem 3rem;
  background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.nav-logo img, .nav-logo svg{width:80px; height:auto; display:block;}
.nav-logo svg path,.nav-logo svg polygon{fill:var(--cream)}

.back-btn{
  display:inline-flex;align-items:center;gap:0.6rem;
  font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;
  color:rgba(255,255,255,0.5);text-decoration:none;
  transition:color 0.25s;
}

.back-btn:hover{color:var(--yellow)}
.back-arrow{transition:transform 0.25s}
.back-btn:hover .back-arrow{transform:translateX(-4px)}

/* HERO */
.project-hero{
  padding:10rem 3rem 4rem;
  border-bottom:1px solid rgba(255,255,255,0.07);
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;align-items:end;
}

.project-cat{
  font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--yellow);margin-bottom:1rem;
  display:flex;align-items:center;gap:0.75rem;
}

.project-cat::before{content:'';display:block;width:24px;height:1px;background:var(--yellow)}

.project-title{
  font-size:clamp(2.5rem,6vw,4.5rem);font-weight:300;
  letter-spacing:-0.025em;line-height:1.05;
}

.project-meta{
  display:flex;flex-direction:column;gap:1.5rem;
  padding-top:1rem;
}

.meta-label{
  font-size:0.65rem;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);margin-bottom:0.3rem;
}

.meta-value{font-size:0.88rem;color:rgba(255,255,255,0.7)}

.meta-tags{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.4rem}

.tag{
  font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:0.25rem 0.7rem;border:1px solid rgba(255,255,255,0.12);
  border-radius:1px;color:rgba(255,255,255,0.45);
}

/* PROJECT DESCRIPTION */
.project-brief{
  padding:4rem 3rem;
  max-width:680px;
  border-bottom:1px solid rgba(255,255,255,0.07);
}

.brief-heading{
  font-size:1.1rem;font-weight:400;letter-spacing:-0.01em;
  margin-bottom:1rem;color:var(--cream);
}

.brief-text{
  font-size:0.92rem;color:rgba(255,255,255,0.55);
  line-height:1.9;
}

/* IMAGES */
.project-images{padding:3rem;}

.project-image-block{
  margin-bottom:1rem;
  overflow:hidden;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.07);
  opacity:0;transform:translateY(24px);
  transition:opacity 0.7s ease,transform 0.7s cubic-bezier(0.16,1,0.3,1);
}

.project-image-block.visible{opacity:1;transform:translateY(0)}

.project-image-block img{
  width:100%;height:auto;display:block;
  transition:transform 0.6s cubic-bezier(0.16,1,0.3,1);
}

.project-image-block:hover img{transform:scale(1.01)}

.image-row{
  display:grid;grid-template-columns:1fr 1fr;
  gap:2rem;margin-bottom:1rem;
}

.image-row .project-image-block{margin-bottom:0}

.img-caption{
  font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.2);padding:0.6rem 0 0;
}

/* NEXT PROJECT */
.next-project{
  padding:5rem 3rem;
  border-top:1px solid rgba(255,255,255,0.07);
  display:flex;justify-content:space-between;align-items:center;
}

.next-label{
  font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.3);margin-bottom:0.5rem;
}

.next-title{
  font-size:clamp(1.5rem,3vw,2.2rem);font-weight:300;
  letter-spacing:-0.02em;color:var(--cream);
  transition:color 0.25s;
}

.next-link{text-decoration:none}

.next-link:hover .next-title{color:var(--yellow)}

.next-arrow{
  font-size:2.5rem;color:rgba(255,255,255,0.15);
  transition:all 0.3s;
}

.next-link:hover .next-arrow{color:var(--yellow);transform:translateX(8px)}

/* FOOTER */
footer{
  padding:2rem 3rem;
  border-top:1px solid rgba(255,255,255,0.07);
  display:flex;justify-content:space-between;align-items:center;
}

.footer-copy{font-size:0.72rem;letter-spacing:0.06em;color:rgba(255,255,255,0.2)}

.footer-back{
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  text-decoration:none;
  transition:color 0.25s;
}

.footer-back:hover{
  color:var(--yellow);
}

@media(max-width:768px){
  nav,footer,
  .project-hero,.project-brief,
  .project-images,.next-project{padding-left:1.5rem;padding-right:1.5rem}
  .project-hero{grid-template-columns:1fr;gap:2.5rem;padding-top:8rem}
  .image-row{grid-template-columns:1fr}
  .next-project{flex-direction:column;align-items:flex-start;gap:1.5rem}
}

/* Global responsive helpers */
img, picture, video, iframe{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding-left:3rem;padding-right:3rem}

/* Mobile navigation */
nav .nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,0.08);color:var(--cream);padding:0.5rem 0.8rem;border-radius:4px}
.nav-links{display:flex;gap:2.5rem;align-items:center}

@media(max-width:900px){
  nav{padding:1rem 1.25rem}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--navy);flex-direction:column;gap:0;padding:1rem;border-top:1px solid rgba(255,255,255,0.04)}
  .nav-links.show{display:flex}
  nav .nav-toggle{display:inline-flex}
}

/* Utility spacing for small screens */
@media(max-width:480px){
  :root{--gutter:12px}
  .project-title{font-size:clamp(1.6rem,6vw,2.4rem)}
}

/* Admin dashboard responsive tweaks */
#adminPage .admin-grid{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:start}
#adminPage .admin-sidebar{padding:1.5rem;border-left:1px solid rgba(255,255,255,0.04);}

@media(max-width:900px){
  #adminPage .admin-grid{grid-template-columns:1fr;padding:1.5rem}
  #adminPage .admin-sidebar{order:2;border-left:none;border-top:1px solid rgba(255,255,255,0.04);width:100%}
  #adminPage .admin-main{order:1}
}

/* Hero reorder for small screens when hero uses two columns */
#hero .hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
@media(max-width:768px){
  #hero .hero-inner{grid-template-columns:1fr;gap:1.25rem}
  #hero .hero-media{order:2}
  #hero .hero-content{order:1}
}