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

:root{
  --bg:#000;
  --fg:#fff;
  --blue:#0b69cf;
  --muted:#8a8a8a;
  --line:#1e1e1e;
  --red:#ff2b2b;
}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding:.9rem clamp(1rem,4vw,3rem);
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:800;letter-spacing:.12em;font-size:.8rem}
.brand .dot{color:var(--blue);margin:0 .35em}
.topbar nav{display:flex;gap:1.4rem}
.topbar a{
  color:var(--muted);text-decoration:none;
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
  transition:color .2s;
}
.topbar a:hover{color:var(--fg)}

/* ---------- hero ---------- */
.hero{
  padding:clamp(3rem,9vw,7rem) clamp(1rem,4vw,3rem) clamp(3rem,7vw,5rem);
  text-align:center;
  border-bottom:1px solid var(--line);
}
.kicker{
  font-size:.7rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--blue);margin-bottom:2rem;
}
.hero-img{
  width:min(1100px,100%);
  margin:0 auto;
}
.hero h1{
  margin-top:2.5rem;
  font-size:clamp(1.1rem,2.5vw,1.6rem);
  letter-spacing:.3em;font-weight:800;
}
.sub{margin-top:.9rem;color:var(--muted);font-size:.95rem;letter-spacing:.05em}

/* ---------- colors ---------- */
.colors{padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,3rem);text-align:center}
.colors h2{font-size:clamp(1.3rem,3vw,2rem);letter-spacing:.2em;font-weight:800}
.lead{margin-top:.8rem;color:var(--muted);font-size:.9rem}

.grid{
  margin:3.5rem auto 0;
  max-width:1400px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(1rem,2vw,1.75rem);
}
.grid figure{
  position:relative;
  background:#000;
  border:1px solid var(--line);
  padding:clamp(1rem,1.8vw,1.5rem);
  cursor:zoom-in;
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.grid figure::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.07),transparent 65%);
  opacity:0;transition:opacity .3s ease;pointer-events:none;
}
.grid figure:hover{
  transform:translateY(-6px);
  border-color:#4a4a4a;
  box-shadow:0 18px 45px rgba(0,0,0,.9);
}
.grid figure:hover::after{opacity:1}
.grid figure img{
  width:100%;
  transition:transform .4s ease;
}
.grid figure:hover img{transform:scale(1.04)}
.grid .wide{grid-column:auto}

.disclaimer{
  margin:2.5rem auto 0;
  max-width:640px;
  font-size:.72rem;
  line-height:1.6;
  letter-spacing:.04em;
  color:#5a5a5a;
  font-style:italic;
}

/* ---------- fake ---------- */
.fake{
  border-top:1px solid var(--line);
  background:#080808;
  padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,3rem);
}
.fake-wrap{
  max-width:1100px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4rem);align-items:center;
}
.fake-img{position:relative;filter:grayscale(1) brightness(.62)}
.fake-img img{border:1px solid var(--line)}
.stamp{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-12deg);
  border:4px solid var(--red);color:var(--red);
  padding:.5rem 1.4rem;
  font-size:clamp(1.1rem,3.2vw,2rem);font-weight:800;letter-spacing:.15em;
  white-space:nowrap;
  background:rgba(0,0,0,.35);
}
.fake-txt h2{
  font-size:clamp(1.4rem,3.2vw,2.2rem);
  letter-spacing:.08em;color:var(--red);font-weight:800;
}
.fake-txt p{margin-top:1.1rem;line-height:1.65;color:#cfcfcf;font-size:.98rem}
.fake-txt strong{color:#fff}
.warn{
  margin-top:1.6rem !important;
  border-left:3px solid var(--red);
  padding-left:1rem;
  font-weight:700;color:#fff !important;
}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(0,0,0,.94);
  display:flex;align-items:center;justify-content:center;
  padding:2rem;cursor:zoom-out;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:90vh;object-fit:contain}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:2.5rem 1rem;text-align:center;
  color:#5a5a5a;font-size:.75rem;letter-spacing:.1em;
}

@media(max-width:800px){
  .fake-wrap{grid-template-columns:1fr}
  .topbar nav{gap:1rem}
}