/* ══════════════════════════════════════════════════════════════════
   Marin June — landingspagina
   Warme, rustige stijl die past bij de keramiek- en Nederlandse-site.
   De kleuren staan hieronder bij :root — pas ze gerust aan.
   ══════════════════════════════════════════════════════════════════ */

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

:root {
  /* Warme basis */
  --cream:        #f7f1e7;  /* achtergrond */
  --cream-soft:   #fffaf2;  /* kaartjes */
  --ink:          #33302b;  /* donkere tekst */
  --ink-soft:     #6b6154;  /* zachtere tekst */

  /* Accentkleuren per project */
  --pottery:      #046a38;  /* groen — keramiek */
  --pottery-soft: #e3ede4;
  --dutch:        #cc5500;  /* warm oranje — Nederlandse les */
  --dutch-soft:   #ffe6cf;
  --oma:          #b45a6b;  /* zacht roze/rood — Oma's muur */
  --oma-soft:     #f6dfe1;
}

body {
  font-family: 'Rubik', -apple-system, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -200px, #fdf7ee 0%, var(--cream) 60%);
  color: var(--ink);
  min-height: 100vh;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  display: flex;
  flex-direction: column;
}

/* ── Kop met naam ── */
.hero {
  text-align: center;
  padding: 5rem 1.5rem 2.5rem;
  max-width: 720px;
  margin: 0 auto;
}

.hero .eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--dutch);
  margin-bottom: 1rem;
}

.hero h1 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(2.8rem, 8vw, 4.5rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 1rem;
}

.hero .tagline {
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 auto;
}

/* ── Kaartjes ── */
.cards {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  max-width: 1040px;
  width: 100%;
  margin: 1.5rem auto 0;
  padding: 1rem 1.5rem 4rem;
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--cream-soft);
  border: 1px solid #ece2d2;
  border-radius: 18px;
  padding: 2rem 1.9rem 1.9rem;
  text-decoration: none;
  color: var(--ink);
  box-shadow: 0 6px 20px rgba(90, 70, 40, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  /* gekleurde streep bovenaan elk kaartje */
  border-top: 5px solid var(--accent, #ccc);
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 30px rgba(90, 70, 40, 0.13);
}

.card-tag {
  align-self: flex-start;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0.3rem 0.75rem;
  border-radius: 9999px;
  background: var(--accent-soft, #eee);
  color: var(--accent, #555);
  margin-bottom: 1.1rem;
}

.card h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
  color: var(--ink);
}

.card p {
  font-size: 1.02rem;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
  flex: 1;
}

.card-link {
  font-weight: 500;
  color: var(--accent, #555);
  font-size: 1.02rem;
}

/* Accentkleur per kaartje */
.card-pottery { --accent: var(--pottery); --accent-soft: var(--pottery-soft); }
.card-dutch   { --accent: var(--dutch);   --accent-soft: var(--dutch-soft); }
.card-oma     { --accent: var(--oma);     --accent-soft: var(--oma-soft); }

/* ── Voettekst ── */
footer {
  text-align: center;
  padding: 2rem 1.5rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-top: 1px solid #ece2d2;
}

/* ── Kleinere schermen ── */
@media (max-width: 600px) {
  .hero { padding: 3.5rem 1.25rem 1.5rem; }
  .hero .tagline { font-size: 1.05rem; }
  .cards { padding: 1rem 1.25rem 3rem; gap: 1.25rem; }
  .card { padding: 1.75rem 1.5rem 1.6rem; }
}

/* Zachte tik-highlight op telefoons */
a { -webkit-tap-highlight-color: rgba(204, 85, 0, 0.15); }