:root{
  --cream:        #efe9dc;
  --cream-2:      #e5dcc9;
  --stone:        #d8cdb8;
  --ink:          #362f27;
  --ink-soft:     #5a5346;
  --gray:         #8c8577;
  --gray-line:    #c7bda8;
  --gold:         #cf9d4f;
  --gold-soft:    #e0bc7c;
  --amber:        #b97a3d;
  --amber-deep:   #84531c;
  --blurple:      #5865F2;
  --blurple-dark: #4752c4;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --shadow-card: 0 10px 30px -12px rgba(54,47,39,0.35);
  --shadow-soft: 0 4px 14px -6px rgba(54,47,39,0.25);

  --font-display: "Baloo 2", "Fredoka", system-ui, sans-serif;
  --font-body: "Nunito Sans", "Inter", system-ui, sans-serif;
}

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

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: var(--amber-deep); text-decoration: none; }
a:hover{ text-decoration: underline; }
ul{ margin: 0; padding: 0; list-style: none; }

:focus-visible{
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap{
  width: min(1180px, 92%);
  margin-inline: auto;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  color: #fff;
  background: var(--ink);
  padding: 10px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform .18s ease;
}
.btn:hover{ transform: translateY(-2px); text-decoration: none; }