/* De Grote Meetlat, /meetlat/
   Alleen deze pagina gebruikt dit bestand. De meetlat is een
   schermervaring: je vult je lengte in, je ziet jezelf op schaal naast
   de maten van de Sint, en daaronder staan de rekensommen. */

/* ── Je lengte invullen ─────────────────────────────────────────── */
.ml-invul{
  max-width:640px;margin:0 auto;padding:clamp(22px,3vw,30px);
  background:#fff8e9;border:1px solid rgba(39,52,47,.14);border-radius:22px;
  box-shadow:var(--shadow-soft);transform:rotate(-.5deg);text-align:center;
}
.ml-invul h2{margin:0 0 6px;font:700 clamp(26px,3.2vw,34px)/1.05 "Alegreya",Georgia,serif;letter-spacing:-.02em}
.ml-invul p{margin:0 0 18px;font-size:17px;color:#4c5a52}
.ml-veldrij{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.ml-veldrij input{
  width:130px;padding:12px 14px;border-radius:12px;font-family:inherit;
  border:2px solid rgba(39,52,47,.22);background:#fffaf0;color:var(--ink);
  font:800 26px/1 "Alegreya",Georgia,serif;text-align:center;
}
.ml-veldrij input:focus{outline:none;border-color:var(--red)}
.ml-veldrij .ml-eenheid{font-size:19px;font-weight:700;color:#4c5a52}
.ml-veldrij button{
  cursor:pointer;font-family:inherit;font-size:17px;font-weight:800;
  padding:13px 22px;border:0;border-radius:12px;
  background:var(--red);color:#fff8e9;box-shadow:0 5px 0 var(--red-dark);
}
.ml-veldrij button:active{transform:translateY(2px);box-shadow:0 3px 0 var(--red-dark)}
.ml-melding{margin:14px auto 0;max-width:46ch;font-size:16px;color:var(--red);font-weight:600}

/* ── De scene op schaal ─────────────────────────────────────────── */
.ml-scene-kader{
  margin:56px auto 0;max-width:1040px;padding:clamp(14px,2vw,22px);
  background:#f3e0bd;border:1px solid rgba(39,52,47,.12);border-radius:24px;
}
.ml-scene-kader h2{margin:0 0 10px;font:700 clamp(24px,3vw,32px)/1.05 "Alegreya",Georgia,serif}
.ml-scene{display:block;width:100%;height:auto}
.ml-scene text{font-family:"Source Sans 3",Verdana,sans-serif}
.ml-naam{font-size:9px;fill:#4c5a52;font-weight:600}
.ml-maat{font-size:8px;fill:#8a7256}
.ml-jij{font-size:11px;fill:#315744;font-weight:800}
.ml-hoogtelijn{stroke:#315744;stroke-width:1.4;stroke-dasharray:6 5;fill:none}
.ml-onder{margin:14px auto 0;max-width:62ch;text-align:center;font-size:15px;color:#5a675f}

/* ── De rare rekensommen ────────────────────────────────────────── */
.ml-sommen-blok{margin:60px auto 0;max-width:860px}
.ml-sommen-blok h2{margin:0 0 6px;font:700 clamp(26px,3.2vw,34px)/1.05 "Alegreya",Georgia,serif}
.ml-sommen-blok .ml-inleiding{margin:0 0 22px;font-size:17.5px;color:#41504a;max-width:60ch}
.ml-sommen{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.ml-sommen li{
  padding:18px 20px;border-radius:16px;background:#fffaf0;
  border:1px solid rgba(39,52,47,.14);
}
.ml-sommen li:nth-child(3n+2){background:#f2e2c1}
.ml-sommen li:nth-child(4n+3){transform:rotate(-.6deg)}
.ml-sommen b{display:block;margin-bottom:5px;font:700 20px/1.15 "Alegreya",Georgia,serif;color:var(--red)}
.ml-sommen span{display:block;font-size:16.5px;line-height:1.5;color:#41504a}

/* ── De maten op een rij ────────────────────────────────────────── */
.ml-maten{margin:60px auto 0;max-width:860px;padding:clamp(22px,3.4vw,32px);
  border-radius:20px;background:var(--green);color:#fff5de;box-shadow:var(--shadow-soft)}
.ml-maten h2{margin:0 0 10px;font:700 clamp(24px,3vw,32px)/1 "Alegreya",Georgia,serif}
.ml-maten p{margin:0 0 16px;font-size:17px;color:#e4ece7;max-width:62ch}
.ml-matenlijst{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px 22px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ml-matenlijst li{display:flex;gap:12px;align-items:baseline;font-size:16.5px;color:#e4ece7;
  border-bottom:1px solid rgba(255,245,222,.18);padding-bottom:6px}
.ml-matenlijst b{font:800 18px/1 "Alegreya",Georgia,serif;color:#f0d38d;min-width:64px}
.ml-maten a.btn{margin:0 10px 10px 0}
.ml-maten .btn--goud{background:#f0d38d;color:#3c2c11;box-shadow:0 5px 0 #c19b46}
.ml-maten .btn--zand{background:#e4d6ba;color:var(--ink);box-shadow:0 5px 0 #c9b48b}

@media(max-width:700px){
  .ml-invul{transform:none;border-radius:18px}
  .ml-scene-kader,.ml-sommen-blok,.ml-maten{margin-top:44px}
  .ml-sommen li:nth-child(4n+3){transform:none}
}