/* ─── RESET & BASE ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #080808;
  --fg:        #f2ede4;
  --accent:    #c84b00;
  --muted:     #5a554f;
  --purple:    #6b3fa0;
  --card-bg:   #111010;

  --font-head: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Space Mono', 'Courier New', monospace;

  --space-xs:  clamp(0.5rem,  1.5vw, 0.75rem);
  --space-sm:  clamp(0.75rem, 2.5vw, 1.25rem);
  --space-md:  clamp(1.25rem, 4vw,  2.5rem);
  --space-lg:  clamp(2rem,    7vw,  5rem);
  --space-xl:  clamp(3rem,   12vw,  8rem);
}

html { scroll-behavior: smooth; }

body {
  background:  var(--bg);
  color:      var(--fg);
  font-family: var(--font-body);
  font-size:   clamp(13px, 1.5vw, 16px);
  line-height: 1.6;
  overflow-x:  hidden;
}

/* ─── HERO ─────────────────────────────────────────────────── */
.hero {
  position:    relative;
  height:      100svh;
  min-height:  600px;
  display:     flex;
  align-items: center;
  justify-content: center;
  overflow:    hidden;
}

.hero-bg-text {
  position:   absolute;
  font-family: var(--font-head);
  font-size:   clamp(120px, 30vw, 360px);
  color:       var(--accent);
  opacity:     0.06;
  letter-spacing: -0.02em;
  line-height: 0.85;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
}

.hero-content {
  position:   relative;
  text-align: center;
  z-index:    1;
}

.hero-eyebrow {
  display:        block;
  font-size:      0.75rem;
  letter-spacing:  0.35em;
  color:          var(--accent);
  margin-bottom:  var(--space-sm);
  font-family:    var(--font-body);
}

.hero-title {
  font-family:  var(--font-head);
  font-size:    clamp(72px, 16vw, 200px);
  line-height:  0.88;
  letter-spacing: -0.01em;
  color:        var(--fg);
}

.hero-sub {
  margin-top:  var(--space-sm);
  font-size:   0.9rem;
  color:       var(--muted);
  letter-spacing: 0.08em;
  font-style:  italic;
}

.hero-scroll-hint {
  position:   absolute;
  bottom:     var(--space-md);
  right:      var(--space-md);
  font-size:  0.65rem;
  letter-spacing: 0.3em;
  color:      var(--muted);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ─── MANIFESTO ─────────────────────────────────────────────── */
.manifesto {
  padding:    var(--space-xl) var(--space-md);
  background: var(--bg);
}

.manifesto-inner {
  max-width:  860px;
  margin:     0 auto;
  text-align: center;
}

.manifesto-rule {
  width:      60px;
  height:     2px;
  background: var(--accent);
  margin:     var(--space-md) auto;
}

.manifesto-quote {
  font-family: var(--font-head);
  font-size:   clamp(28px, 5.5vw, 62px);
  line-height: 1.1;
  color:       var(--fg);
  font-style:  normal;
  letter-spacing: 0.01em;
}

.manifesto-body {
  margin-top:  var(--space-md);
  color:       var(--muted);
  font-size:   0.875rem;
  line-height: 1.8;
  max-width:   480px;
  margin-left: auto;
  margin-right: auto;
}

.manifesto-tags {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.75rem;
  justify-content: center;
  margin-top:  var(--space-md);
}

.manifesto-tags span {
  border:      1px solid var(--muted);
  padding:      0.25rem 0.75rem;
  font-size:    0.65rem;
  letter-spacing: 0.2em;
  color:        var(--muted);
}

/* ─── COLLAGE ───────────────────────────────────────────────── */
.collage {
  padding:    0 var(--space-md) var(--space-xl);
}

.collage-grid {
  display:    grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:        2px;
  max-width:  1100px;
  margin:     0 auto;
}

.collage-block {
  padding:    var(--space-md);
  min-height: 280px;
  display:    flex;
  align-items: center;
  justify-content: center;
}

.collage-block--text    { background: #0e0d0c; }
.collage-block--accent  { background: var(--accent); }
.collage-block--outline { border: 1px solid #2a2520; }

.collage-inner { text-align: center; }

.collage-label {
  display:     block;
  font-size:   0.6rem;
  letter-spacing: 0.35em;
  color:       var(--muted);
  margin-bottom: var(--space-sm);
}

.collage-block--accent .collage-label { color: rgba(255,255,255,0.5); }

.collage-text {
  font-family: var(--font-head);
  font-size:   clamp(22px, 3vw, 36px);
  line-height: 1.2;
}

.collage-block--accent .collage-text { color: #fff; }

.collage-list {
  list-style:  none;
  text-align:  left;
}

.collage-list li {
  font-size:   0.9rem;
  color:       rgba(255,255,255,0.85);
  padding:     0.3rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}

.collage-list li:last-child { border-bottom: none; }

.collage-symbol {
  font-size:   clamp(64px, 10vw, 120px);
  line-height: 1;
  color:       var(--accent);
}

.collage-small {
  font-size:   0.7rem;
  color:       var(--muted);
  margin-top:  0.5rem;
  line-height: 1.6;
}

/* ─── DROPS ────────────────────────────────────────────────── */
.drops {
  padding:    var(--space-xl) var(--space-md);
  background:  #0a0908;
}

.drops-header {
  text-align:  center;
  margin-bottom: var(--space-lg);
}

.drops-label {
  font-size:   0.65rem;
  letter-spacing: 0.4em;
  color:       var(--muted);
  border-bottom: 1px solid #2a2520;
  padding-bottom: 0.5rem;
}

.drops-grid {
  display:            grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:                1px;
  max-width:          900px;
  margin:             0 auto;
  background:         #1a1816;
}

.drop-card {
  background:  var(--card-bg);
  padding:    var(--space-md);
  display:    flex;
  flex-direction: column;
  gap:        var(--space-sm);
}

.drop-card-swatch {
  width:        100%;
  aspect-ratio: 4/3;
  border-radius: 2px;
}

.drop-card-swatch--purple  { background: #6b3fa0; }
.drop-card-swatch--black   { background: #1a1a1a; border: 1px solid #2a2520; }
.drop-card-swatch--cream   { background: #e8dfd0; }
.drop-card-swatch--stone   { background: #c2b9a8; }

.drop-card-info {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
}

.drop-card-name   { font-size: 0.9rem; font-weight: 700; }
.drop-card-detail { font-size: 0.7rem;  color: var(--muted); letter-spacing: 0.05em; }
.drop-card-price  { font-size: 1.1rem;  color: var(--accent); font-family: var(--font-head); letter-spacing: 0.05em; margin-top: 0.25rem; }

.drops-note {
  text-align:  center;
  font-size:   0.7rem;
  color:       var(--muted);
  margin-top:  var(--space-md);
  letter-spacing: 0.05em;
}

/* ─── CLOSER ────────────────────────────────────────────────── */
.closer {
  padding:    var(--space-xl) var(--space-md);
  background:  var(--bg);
}

.closer-inner {
  max-width:  860px;
  margin:     0 auto;
  text-align: center;
}

.closer-statement {
  font-family:  var(--font-head);
  font-size:    clamp(28px, 5vw, 58px);
  line-height:  1.15;
  color:        var(--fg);
}

.closer-divider {
  width:      40px;
  height:     2px;
  background: var(--accent);
  margin:     var(--space-md) auto;
}

.closer-sub {
  font-size:   0.8rem;
  color:       var(--muted);
  letter-spacing: 0.2em;
  font-style:  italic;
}

/* ─── FOOTER ────────────────────────────────────────────────── */
.site-footer {
  padding:    var(--space-lg) var(--space-md);
  border-top: 1px solid #1a1816;
  text-align: center;
}

.footer-brand {
  font-family: var(--font-head);
  font-size:   clamp(18px, 3vw, 28px);
  letter-spacing: 0.05em;
  margin-bottom: var(--space-sm);
  color: var(--fg);
}

.footer-links {
  margin-bottom: var(--space-sm);
}

.footer-links a {
  color:       var(--accent);
  text-decoration: none;
  font-size:   0.8rem;
  letter-spacing: 0.05em;
}

.footer-links a:hover { text-decoration: underline; }

.footer-copy {
  font-size:   0.65rem;
  color:       var(--muted);
  letter-spacing: 0.1em;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .collage-grid {
    grid-template-columns: 1fr;
  }
  .collage-block { min-height: 200px; }
  .drops-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 400px) {
  .drops-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── SCROLLBAR ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }