/* Matchlira — color-block / Bauhaus-poster direction. Original build, no shared classes. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --plum:#6a3f7d;
  --plum-dark:#4a2c58;
  --lilac:#f3eef6;
  --ink:#2e1f37;
  --gold:#e8c94a;
  --white:#ffffff;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--lilac);
  line-height:1.55;
}
h1,h2,h3,.brand{
  font-family:'Space Grotesk',Arial,sans-serif;
  font-weight:700;
  letter-spacing:-.01em;
  margin:0;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* ---------- nav ---------- */
.mlr-nav{
  background:var(--plum-dark);
  color:var(--white);
}
.mlr-nav-row{
  max-width:1180px;
  margin:0 auto;
  padding:1.1rem 5vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{font-size:1.3rem}
.brand em{color:var(--gold);font-style:normal}
.mlr-nav-cta{
  background:var(--gold);
  color:var(--plum-dark);
  padding:.6rem 1.3rem;
  border-radius:0;
  font-weight:600;
  font-size:.9rem;
  border:2px solid var(--gold);
}
.mlr-nav-cta:hover{background:transparent;color:var(--gold)}

/* ---------- generic full-bleed block ---------- */
.block{
  position:relative;
  overflow:hidden;
  padding:5.5rem 0;
}
.block-plum{background:var(--plum);color:var(--white)}
.block-plumdark{background:var(--plum-dark);color:var(--white)}
.block-lilac{background:var(--lilac);color:var(--ink)}
.block-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 5vw;
  position:relative;
  z-index:2;
}

/* decorative geometric shapes — sharp, no gradients */
.shape{position:absolute;z-index:1}
.shape-circle{border-radius:50%}
.shape-square{border-radius:0}
.deco-1{width:340px;height:340px;background:var(--gold);top:-120px;right:-90px;opacity:.9}
.deco-2{width:180px;height:180px;background:var(--plum-dark);bottom:-60px;left:8%;opacity:.55}
.deco-3{width:220px;height:220px;background:var(--lilac);top:20%;right:6%;opacity:.12}
.deco-4{width:260px;height:260px;background:var(--gold);bottom:-100px;right:-60px;opacity:.85}
.deco-5{width:150px;height:150px;background:var(--plum);top:-40px;left:10%;opacity:.9}

/* ---------- hero ---------- */
.hero-tag{
  display:inline-block;
  background:var(--gold);
  color:var(--plum-dark);
  font-weight:600;
  font-size:.8rem;
  padding:.35rem .8rem;
  margin-bottom:1.4rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.hero h1{
  font-size:clamp(2.4rem,5.4vw,4.2rem);
  line-height:1.03;
  max-width:15ch;
  margin-bottom:1.4rem;
}
.hero p{
  font-size:1.15rem;
  max-width:46ch;
  opacity:.92;
  margin-bottom:2.2rem;
}
.btn{
  display:inline-block;
  padding:1rem 2rem;
  font-weight:700;
  font-size:1rem;
  border:2px solid var(--gold);
  background:var(--gold);
  color:var(--plum-dark);
}
.btn:hover{background:transparent;color:var(--gold)}
.btn-outline{background:transparent;color:var(--white);border-color:var(--white)}
.btn-outline:hover{background:var(--white);color:var(--plum-dark)}

/* ---------- intro copy ---------- */
.lede{max-width:66ch}
.lede p{font-size:1.08rem;margin:0 0 1.3rem}
.lede p:last-child{margin-bottom:0}

/* ---------- chip grid (mini color blocks) ---------- */
.chips{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
  margin-top:2.8rem;
}
.chip{
  background:var(--white);
  border:3px solid var(--ink);
  padding:1.6rem;
}
.chip-swatch{
  width:2.6rem;height:2.6rem;
  margin-bottom:1rem;
}
.chip:nth-child(1) .chip-swatch{background:var(--gold)}
.chip:nth-child(2) .chip-swatch{background:var(--plum)}
.chip:nth-child(3) .chip-swatch{background:var(--plum-dark)}
.chip h3{font-size:1.05rem;margin-bottom:.5rem}
.chip p{margin:0;font-size:.92rem;opacity:.8}

/* ---------- article cards ---------- */
.section-head{margin-bottom:2.6rem}
.section-head span{
  display:block;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--gold);
  margin-bottom:.6rem;
  font-weight:600;
}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.card{
  padding:2.2rem;
  border:none;
}
.card-a{background:var(--gold);color:var(--plum-dark)}
.card-b{background:var(--lilac);color:var(--ink)}
.card h3{font-size:1.35rem;margin-bottom:.9rem;line-height:1.15}
.card p{font-size:.96rem;opacity:.85;margin:0 0 1.4rem}
.card-link{font-weight:700;font-size:.92rem;border-bottom:2px solid currentColor;padding-bottom:.15rem}

/* ---------- final CTA ---------- */
.cta{text-align:left}
.cta h2{font-size:clamp(2rem,4.2vw,3rem);max-width:16ch;margin-bottom:1.2rem}
.cta p{font-size:1.1rem;max-width:48ch;opacity:.92;margin-bottom:2rem}

/* ---------- footer ---------- */
.mlr-foot{background:var(--plum-dark);color:var(--white);padding:2.4rem 0}
.mlr-foot-row{
  max-width:1180px;margin:0 auto;padding:0 5vw;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;
  align-items:center;justify-content:space-between;
}
.mlr-foot nav{display:flex;gap:1.6rem;font-size:.88rem;opacity:.85}
.mlr-foot nav a:hover{color:var(--gold)}
.mlr-copy{font-size:.82rem;opacity:.6;width:100%;margin-top:1.4rem;border-top:1px solid rgba(255,255,255,.15);padding-top:1.2rem}

/* ---------- legal pages ---------- */
.legal{max-width:760px;margin:0 auto;padding:0 5vw}
.legal h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:2rem}
.legal h2{font-size:1.2rem;margin:2.2rem 0 .7rem}
.legal p{margin:0 0 1rem;opacity:.85}

/* ---------- article page ---------- */
.article-body{max-width:70ch;margin:0 auto;padding:0 5vw}
.article-body h2{font-size:1.35rem;margin:2.4rem 0 .9rem}
.article-body p{margin:0 0 1.2rem;font-size:1.05rem;opacity:.9}
.article-body ul{margin:0 0 1.2rem;padding-left:1.3rem}
.article-body li{margin-bottom:.6rem;font-size:1.05rem;opacity:.9}
.article-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);max-width:20ch;margin-bottom:1rem}
.article-meta{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:var(--gold);font-weight:600;margin-bottom:1rem}

@media (max-width:860px){
  .chips{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .mlr-foot-row{flex-direction:column;align-items:flex-start}
}