:root {
  --bg-white: #fff;
  --text-dark: #1C1C1E;
  --text-muted: #6B6E76;
  --btn-dark: #1C1C1E;
  --btn-hover: #111;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter',sans-serif; }

body { background: var(--bg-white); color: var(--text-dark); padding:40px 8%; }

nav { display:flex; justify-content:space-between; align-items:center; padding:28px 0; }
nav h1 { letter-spacing:3px; font-weight:600; }
nav a { text-decoration:none; color: var(--text-muted); margin-left:25px; transition:0.2s; }
nav a:hover { color: var(--text-dark); }

.contact-section { max-width:600px; margin:auto; padding-top:80px; }
.contact-section h2 { font-size:2.5rem; margin-bottom:15px; text-align:center; }
.contact-section p { color: var(--text-muted); margin-bottom:40px; text-align:center; }

form { display:flex; flex-direction:column; gap:20px; }
input, textarea { padding:12px; border:1px solid #E3E3E3; border-radius:6px; font-size:1rem; outline:none; }
input:focus, textarea:focus { border-color: var(--text-dark); }
textarea { min-height:120px; resize:none; }
.btn { padding:14px; background: var(--btn-dark); color:white; border:none; border-radius:6px; font-weight:600; cursor:pointer; transition:0.2s; }
.btn:hover { background: var(--btn-hover); transform:translateY(-2px); }

footer { padding:50px 0; color: var(--text-muted); font-size:0.9rem; border-top:1px solid #E3E3E3; margin-top:80px; text-align:center; }
/* DEFAULT (desktop stays same) */
.collection {
  grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
}

/* TABLET */
@media (max-width: 900px) {
  .collection {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* PHONE */
@media (max-width: 500px) {
  .collection {
    grid-template-columns: 1fr;
  }
}