:root{
  --bg: #0A0A0A;
  --bg-soft: #1A1A1A;
  --ink: #F5F5F2;
  --ink-dim: #9C9C96;
  --accent: #D98E2B;
  --accent-deep: #B8651E;
  --line: rgba(245,245,242,0.12);
}

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

html{scroll-behavior:smooth;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-weight:300;
  overflow-x:hidden;
}

a{color:inherit;}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ============ NAV ============ */
nav{
  position:fixed; top:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 48px;
  z-index:100;
  mix-blend-mode:difference;
}
.logo{
  font-family:'Archivo',sans-serif;
  font-size:1.3rem;
  letter-spacing:0.04em;
  font-weight:600;
  text-decoration:none;
}
.logo span{font-style:normal; font-weight:200; color:var(--accent); mix-blend-mode:normal;}
.nav-links{display:flex; gap:36px;}
.nav-links a{
  color:var(--ink);
  text-decoration:none;
  font-size:0.85rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:400;
  position:relative;
}
.nav-links a::after{
  content:'';
  position:absolute; bottom:-6px; left:0;
  width:0; height:1px;
  background:var(--ink);
  transition:width 0.3s ease;
}
.nav-links a:hover::after{width:100%;}
.nav-links a.active::after{width:100%;}

/* ============ BREADCRUMB ============ */
.breadcrumb{
  position:fixed;
  top:28px; left:48px;
  z-index:100;
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.05em;
}
.breadcrumb a{
  color:var(--ink);
  text-decoration:none;
  opacity:0.7;
  transition:opacity 0.3s ease;
}
.breadcrumb a:hover{opacity:1;}
.breadcrumb span{color:var(--ink-dim);}
.breadcrumb .current{color:var(--accent); opacity:1;}

/* ============ SECTION GENERAL ============ */
section{
  padding:120px 48px;
  max-width:1400px;
  margin:0 auto;
}
.section-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:16px;
  display:block;
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:64px;
  flex-wrap:wrap;
  gap:24px;
  border-bottom:1px solid var(--line);
  padding-bottom:32px;
}
.section-title{
  font-family:'Archivo',sans-serif;
  font-size:clamp(2.2rem, 5vw, 4rem);
  font-weight:100;
  line-height:1.05;
}
.section-title em{font-style:normal; font-weight:900; color:var(--accent);}
.section-desc{
  max-width:380px;
  color:var(--ink-dim);
  font-size:0.95rem;
  line-height:1.7;
}

@keyframes fadeUp{
  from{opacity:0; transform:translateY(24px);}
  to{opacity:1; transform:translateY(0);}
}

/* EXIF overlay — signature element */
.exif{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:20px;
  background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.85) 100%);
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.4s ease, transform 0.4s ease;
  pointer-events:none;
}
.exif-row{
  display:flex;
  justify-content:space-between;
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  color:var(--ink);
  letter-spacing:0.05em;
  padding:3px 0;
  border-top:1px solid rgba(242,240,235,0.15);
}
.exif-row:first-child{border-top:none;}
.exif-row span:last-child{color:var(--accent);}
.exif-title{
  font-family:'Archivo',sans-serif;
  font-size:1rem;
  font-weight:500;
  margin-bottom:8px;
}

/* ============ FOOTER ============ */
footer{
  text-align:center;
  padding:48px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.7rem;
  color:var(--ink-dim);
  border-top:1px solid var(--line);
}

/* ============ SHOWCASE SECTION LABEL (used between grouped grids) ============ */
.showcase-label{
  font-family:'JetBrains Mono',monospace;
  font-size:0.8rem;
  font-weight:500;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:#0A0A0A;
  background:var(--accent);
  width:100%;
  margin:0;
  scroll-margin-top:64px;
}
.showcase-label-inner{
  display:block;
  max-width:1400px;
  margin:0 auto;
  padding:14px 48px;
}
.showcase-label:not(:first-of-type){
  margin-top:48px;
}

/* ============ RESPONSIVE BASE ============ */
@media (max-width: 900px){
  .nav-links{display:none;}
  section{padding:80px 24px;}
  nav{padding:20px 24px;}
  .breadcrumb{top:20px; left:24px;}
  .showcase-label-inner{padding:12px 24px;}
}