/* ============================================================
   MELHARDY — Maison design system
   v0.3 — N° I
   Niet wellness. Maison voor het lichaam dat te lang heeft vastgehouden.
   Fonts zijn self-hosted: er gaat geen enkel netwerkverzoek uit.
   ============================================================ */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/bodoni-400.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/bodoni-500.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/bodoni-italic-400.woff2") format("woff2");
}
/* Inter = de rustige leeslaag. Bodoni blijft voor display. */
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-600.woff2") format("woff2");
}

:root {
  --ivory:        #ECEAE2;
  --ivory-deep:   #E2DFD4;
  --onyx:         #16161A;
  --jet:          #0A0A0C;
  --ink:          #1B1B1F;
  --brass:        #A8884A;
  --brass-hi:     #D3B879;
  --sanguine:     #7A1A1F; /* maximaal 1x per uiting */

  --line:         rgba(22,22,26,0.14);
  --line-soft:    rgba(22,22,26,0.08);
  --muted:        rgba(22,22,26,0.66);

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", "Bodoni MT", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;

  --maxw: 560px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ivory);
  color: var(--onyx);
  /* Leeslaag = Inter (rustig, hoog leesbaar). Bodoni alleen voor display. */
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  letter-spacing: -0.003em;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 22px 96px;
}

/* Display-typografie: hoge optische maat = elegante Didone-haarlijnen.
   Alleen voor groot formaat, waar dunheid juist mooi is en goed leest. */
.wordmark, .calibration, .numeral, .mark,
h2.section, .section, .stat .v, .measure input, .cover .calibration {
  font-family: var(--serif);
  /* lagere optische maat = steviger haarlijnen, leesbaar op telefoon;
     zwaarder gewicht voor extra body. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18, "wght" 560;
}
/* italic display blijft gewicht 400 (italic-bestand is niet variabel in gewicht);
   lagere optische maat maakt de schuine haarlijnen alsnog steviger leesbaar. */
.calibration em, .mark em, .numeral, .italic-pivot {
  font-variation-settings: "opsz" 12;
}

/* ---------- Letterhead ---------- */
.letterhead {
  text-align: center;
  padding: 38px 0 26px;
}
.wordmark {
  font-size: 31px;
  letter-spacing: 0.26em;
  margin: 0;
  padding-left: 0.26em; /* compenseer tracking */
  font-variation-settings: "opsz" 24, "wght" 660;
}
.numeral {
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.16em;
  color: var(--brass);
  margin-top: 7px;
}

/* ---------- Rules & dividers ---------- */
.rule {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 26px 0;
}
.rule-brass {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass) 50%, transparent);
  border: 0;
  margin: 30px 0;
}

/* ---------- Type ---------- */
.calibration {
  font-size: 25px;
  line-height: 1.32;
  font-weight: 400;
  margin: 8px 0 0;
  letter-spacing: 0.005em;
}
.calibration em { color: var(--brass); font-style: italic; }

.eyebrow {
  font-size: 10.5px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.lede {
  font-size: 16.5px;
  color: var(--ink);
  line-height: 1.62;
}
.fine {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
}
.italic-pivot { font-style: italic; color: var(--brass); }

h2.section {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.02em;
  margin: 0 0 4px;
}

/* ---------- Moment toggle ---------- */
.moment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 10px;
}
.moment button {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 18px 0;
  color: var(--ink);
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.moment button:last-child { border-right: 0; }
.moment button[aria-pressed="true"] {
  background: var(--onyx);
  color: var(--ivory);
}

/* ---------- Dagdeel + tijd (automatisch, niet kiesbaar) ---------- */
.moment-now {
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 18px 16px;
}
.dagdeel {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 0.02em;
  font-optical-sizing: none;
  font-variation-settings: "opsz" 18, "wght" 560;
}
.moment-now .fine { margin: 4px 0 0; }

/* ---------- Field blocks ---------- */
.field { margin: 30px 0; }
.field > label,
.field > .q {
  display: block;
  font-size: 17px;
  line-height: 1.45;
  margin-bottom: 6px;
}
.field .help {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 14px;
  line-height: 1.55;
}

/* number input — measured, quiet */
.measure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding: 6px 0;
}
.measure input {
  font-family: var(--serif);
  font-size: 30px;
  border: 0;
  background: transparent;
  width: 100%;
  color: var(--onyx);
  padding: 4px 0;
  outline: none;
  letter-spacing: 0.02em;
}
.measure input::placeholder { color: rgba(22,22,26,0.22); }
.measure .unit { font-size: 15px; color: var(--muted); font-style: italic; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }

/* third measurement — only when needed */
.third {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin .4s var(--ease);
  margin: 0;
}
.third.show {
  max-height: 200px;
  opacity: 1;
  margin: 22px 0 0;
}
.third .why {
  font-size: 12px;
  color: var(--brass);
  font-style: italic;
  margin-bottom: 8px;
}

/* ---------- 0-10 scale ---------- */
.scale { margin-top: 4px; }
.scale .ends {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 10px;
  letter-spacing: 0.01em;
}
.ticks {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  gap: 4px;
}
.ticks button {
  appearance: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  height: 42px;
  border-radius: 2px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .12s var(--ease);
}
.ticks button:active { transform: scale(0.94); }
.ticks button[aria-pressed="true"] {
  background: var(--onyx);
  color: var(--ivory);
  border-color: var(--onyx);
}
/* the onrust-buik scale carries a brass accent when chosen */
.scale.mind .ticks button[aria-pressed="true"] {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--jet);
}

/* ---------- Consent ---------- */
.consent {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 18px;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
}
.consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--onyx); flex: 0 0 auto; }
.consent .t { font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.consent .t a { color: var(--onyx); border-bottom: 1px solid var(--brass); text-decoration: none; }

/* ---------- Buttons ---------- */
.btn {
  appearance: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--onyx);
  color: var(--ivory);
  border: 1px solid var(--onyx);
  border-radius: 2px;
  padding: 18px 28px;
  width: 100%;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease), opacity .3s var(--ease);
}
.btn:hover { background: var(--jet); }
.btn[disabled] { opacity: 0.32; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  color: var(--onyx);
  border: 1px solid var(--line);
  letter-spacing: 0.14em;
}
.btn-ghost:hover { background: rgba(22,22,26,0.04); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-row .btn { width: auto; flex: 1 1 auto; min-width: 0; padding-left: 14px; padding-right: 14px; }

a.link {
  color: var(--onyx);
  text-decoration: none;
  border-bottom: 1px solid var(--brass);
  padding-bottom: 1px;
}

/* ---------- Cover (first screen) ---------- */
.cover {
  min-height: 86dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.cover .calibration { font-size: 28px; }
.cover .start { margin-top: 40px; }

/* ---------- Confirmation ---------- */
.confirm {
  min-height: 70dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.confirm .mark {
  font-size: 40px;
  font-style: italic;
  color: var(--brass);
  margin-bottom: 18px;
}

/* ---------- Insight page ---------- */
.badge {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.badge.green  { color: #2f5d3a; border-color: #2f5d3a55; }
.badge.orange { color: #8a5a1f; border-color: #8a5a1f55; }
.badge.red    { color: var(--sanguine); border-color: rgba(122,26,31,0.4); }

.card {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 24px;
  margin: 18px 0;
  background: rgba(255,255,255,0.22);
}
.card h3 {
  font-size: 12px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0 0 16px;
}
.stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}
.stat:last-child { border-bottom: 0; }
.stat .k { font-size: 14px; color: var(--ink); }
.stat .v { font-size: 22px; letter-spacing: 0.01em; }
.stat .v small { font-size: 13px; color: var(--muted); font-style: italic; }

.read {
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ink);
}
.read .accent { color: var(--brass); font-style: italic; }

figure { margin: 0; }
figcaption { font-size: 11.5px; color: var(--muted); margin-top: 10px; letter-spacing: 0.02em; }

.empty {
  text-align: center;
  padding: 60px 0;
  color: var(--muted);
}

/* ---------- Nav / footer ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 18px 0 0;
}
.topbar a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; padding: 8px 0; }
.topbar a:hover { color: var(--onyx); border-bottom-color: var(--brass); }
.topbar a.brand { letter-spacing: inherit; }
a.wordlink { color: inherit; text-decoration: none; display: inline-block; }

footer.colophon {
  text-align: center;
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--muted);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  background: var(--onyx);
  color: var(--ivory);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 14px 22px;
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
  z-index: 50;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.hidden { display: none !important; }

/* ---------- homepage-pitch (alleen voor wie nog niet meet) ---------- */
.pitch-blok { margin: 44px 0 0; text-align: left; }
.pitch-blok .card { margin: 12px 0; }
.pitch-blok .card h3 {
  font-family: var(--serif);
  font-size: 18px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--onyx);
  font-variation-settings: "opsz" 18, "wght" 560;
  margin: 0 0 8px;
}
.pitch-blok .steps li strong { font-weight: 600; }

/* ---------- context-chips (optioneel, een tik) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button {
  appearance: none;
  font-family: var(--sans);
  font-size: 13.5px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,0.25);
  color: var(--ink);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.chips button[aria-pressed="true"] {
  background: var(--onyx);
  border-color: var(--onyx);
  color: var(--ivory);
}

/* ---------- de boog van veertien dagen (stille punten) ---------- */
.dagdots { display: none; justify-content: center; gap: 7px; margin-top: 16px; }
.dagdots span {
  width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid var(--line);
  background: transparent;
}
.dagdots span.vol { background: var(--brass); border-color: var(--brass); }

/* ---------- ademruimte (gedeeld: rust.html + bevestiging) ---------- */
.breath-stage { display: flex; flex-direction: column; align-items: center; padding: 26px 0 6px; }
.breath-ring {
  width: 170px; height: 170px; border-radius: 50%;
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.breath-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brass);
  transform: scale(1);
  transition: transform linear;
}
.breath-word {
  font-family: var(--serif); font-style: italic; font-size: 20px;
  color: var(--brass); margin-top: 22px; min-height: 28px;
  font-variation-settings: "opsz" 18;
}
.breath-count { font-family: var(--sans); font-size: 13px; color: var(--muted); margin-top: 4px; min-height: 18px; }

/* avondslot: de afsluitende zin vloeit rustig in, de punt landt zacht */
.lede.avond-in { animation: avondFade 1.2s var(--ease) both; }
@keyframes avondFade { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.close-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--brass);
  margin: 16px auto 0; transform: scale(0); opacity: 0;
  transition: transform 1.1s var(--ease), opacity 1.1s var(--ease);
}
.close-dot.landed { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .lede.avond-in { animation: none; }
  .close-dot { transition: none; transform: scale(1); opacity: 1; }
}

/* ---------- Prose / legal / protocol pages ---------- */
.prose { font-size: 15.5px; line-height: 1.68; color: var(--ink); }
.prose h2 {
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin: 36px 0 12px;
}
.prose h2:first-of-type { margin-top: 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin: 7px 0; }
.prose a { color: var(--onyx); border-bottom: 1px solid var(--brass); text-decoration: none; }
.prose strong { font-weight: 600; }

.note {
  border-left: 2px solid var(--brass);
  padding: 4px 0 4px 18px;
  margin: 18px 0;
  color: var(--ink);
}
.note.warn { border-left-color: var(--sanguine); }

/* ordered measurement steps */
.steps { counter-reset: s; list-style: none; padding: 0; margin: 8px 0 0; }
.steps li {
  counter-increment: s;
  position: relative;
  padding: 14px 0 14px 46px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
  line-height: 1.5;
}
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  content: counter(s, upper-roman);
  position: absolute; left: 0; top: 14px;
  font-style: italic;
  color: var(--brass);
  font-size: 14px;
  letter-spacing: 0.04em;
  width: 34px;
}

/* measurement diagram */
.diagram { margin: 8px auto 24px; max-width: 280px; }
.diagram svg { width: 100%; height: auto; display: block; }

/* legal footer links */
.legalnav {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.legalnav a {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  padding: 10px 4px; display: inline-block; /* duim-vriendelijk tik-doel */
}
.legalnav a:hover { color: var(--onyx); }

@media (max-width: 480px) {
  /* handmatige regelafbrekingen in taglines: op smal scherm laten doorlopen
     (de bron heeft een spatie voor de break, dus de tekst blijft leesbaar) */
  br.d-br { display: none; }
  .wordmark { font-size: 27px; letter-spacing: 0.2em; padding-left: 0.2em; }
  .calibration { font-size: 22px; }
  .ticks button { height: 38px; font-size: 12px; }
  /* drie controleknoppen passen niet naast elkaar: stapelen, vol breed */
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; flex: none; }
  /* cover compacter: Begin de meting hoort boven de vouw */
  .cover .letterhead { padding: 24px 0 16px; }
  .cover .calibration { font-size: 23px; }
  .cover .fine { margin-top: 14px !important; }
  .cover .start { margin-top: 24px; }
}