@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --paper: #FAF6F0;
  --foam: #EDE1D0;
  --espresso: #2A1810;
  --cinnamon: #B8722C;
  --sage: #6B7353;
  --line: rgba(42,24,16,0.12);
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--paper);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(184,114,44,0.06), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(107,115,103,0.05), transparent 40%);
  font-family: 'Work Sans', sans-serif;
  color: var(--espresso);
  min-height: 100vh;
}

a{ color: inherit; }

/* --- Nav --- */
.site-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  max-width: 880px;
  margin: 0 auto;
  padding: 26px 20px 10px;
}
.logo{
  font-family:'Fraunces', serif;
  font-weight: 700;
  font-size: 20px;
  text-decoration:none;
  color: var(--espresso);
}
.logo span{ color: var(--cinnamon); }
.nav-link{
  font-size: 14px;
  text-decoration:none;
  color: rgba(42,24,16,0.6);
}
.nav-link:hover{ color: var(--espresso); }

/* --- Footer --- */
.site-footer{
  max-width: 880px;
  margin: 60px auto 30px;
  padding: 20px;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  font-size: 13px;
  color: rgba(42,24,16,0.5);
}
.site-footer a{ text-decoration:none; color: rgba(42,24,16,0.5); }
.site-footer a:hover{ color: var(--espresso); }

/* --- Generic card (quiz) --- */
.card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 40px 36px 32px;
  box-shadow: 0 1px 2px rgba(42,24,16,0.04);
  max-width: 540px;
  margin: 20px auto;
}

/* --- Buttons --- */
.btn{
  font-family: 'Work Sans', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration:none;
  display:inline-block;
}
.btn-primary{ background: var(--espresso); color: var(--paper); }
.btn-secondary{ background: transparent; color: var(--espresso); border: 1.5px solid var(--line); }

/* --- Ad placeholder --- */
.ad-slot{
  border: 1.5px dashed rgba(42,24,16,0.25);
  border-radius: 12px;
  padding: 18px;
  text-align:center;
  font-size: 12.5px;
  color: rgba(42,24,16,0.45);
  background: repeating-linear-gradient(
    135deg, rgba(42,24,16,0.02), rgba(42,24,16,0.02) 10px,
    transparent 10px, transparent 20px
  );
  max-width: 540px;
  margin: 0 auto 20px;
}