/* Eén van acht — vormgeving
   Kleuren: papier, inkt, wijnrood. Letter: Bricolage Grotesque, met Instrument Serif
   cursief als enige accent ("jou"). Het symbool: acht stoelen in een kring. */

@font-face { font-family: 'Bricolage'; src: url('/fonts/bricolage.woff') format('woff'); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: 'Instrument Serif'; src: url('/fonts/instrument-serif-italic.woff') format('woff'); font-style: italic; font-weight: 400; font-display: swap; }

:root {
  --paper: #FBF8F5;
  --sheet: #FFFFFF;
  --tint: #F4EEE9;
  --ink: #231C1C;
  --ink-2: #4A403D;
  --muted: #7E716C;
  --line: #E8DFD9;
  --wine: #7D2E33;
  --wine-deep: #5F2126;
  --blush: #EBD3CD;
  /* Koraal: het tweede accent, spaarzaam. Betekent 'het loopt': de open stoel, de klok, seintjes. */
  --coral: #E8735A;
  --coral-ink: #B4442E;
  --coral-tint: #FBE6DF;
  --ok: #2F5D46;
  --radius: 16px;
  --sans: 'Bricolage', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --gutter: 20px;
  --col: 35rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 1.0625rem; line-height: 1.5;
  font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--wine); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--blush); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.noscript { padding: 24px; }

/* ── Beta-balk ──────────────────────────────────────────────── */
.beta { background: var(--ink); color: var(--paper); font-size: 0.875rem; text-align: center; padding: 8px var(--gutter); }
.beta a { color: #F4A592; margin-left: 6px; }

/* ── Kop en kolom ───────────────────────────────────────────── */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--gutter); max-width: calc(72rem + 2 * var(--gutter)); margin: 0 auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; font-size: 1.125rem; letter-spacing: -0.02em; }
.logo svg { width: 26px; height: 26px; }
.top nav { display: flex; gap: 20px; font-size: 0.9375rem; font-weight: 500; }
.top nav a { text-decoration: none; color: var(--ink-2); }
.top nav a:hover { color: var(--wine); }

main { padding: 8px var(--gutter) 72px; }
.col { max-width: var(--col); margin: 0 auto; }

/* ── Typografie ─────────────────────────────────────────────── */
.display {
  font-size: clamp(2.6rem, 11vw, 4.5rem); line-height: 0.98; letter-spacing: -0.04em;
  font-weight: 640; margin: 0 0 20px; text-wrap: balance;
}
.display.compact { font-size: clamp(2.2rem, 9vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 6vw, 2.25rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 620; margin: 0 0 14px; text-wrap: balance; }
h3 { font-size: 1.1875rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: 620; margin: 0 0 6px; }
p { margin: 0 0 14px; }
.lede { font-size: 1.1875rem; line-height: 1.5; color: var(--ink-2); max-width: 34ch; text-wrap: pretty; }
.meta { font-size: 0.9375rem; color: var(--muted); margin: 0 0 14px; }
.small { font-size: 0.9375rem; color: var(--muted); }
.jou { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--wine); letter-spacing: -0.01em; font-size: 1.1em; padding-right: 0.04em; }
.whisper { font-family: var(--serif); font-style: italic; font-size: 1.5rem; line-height: 1.25; color: var(--wine); margin: 22px 0 0; }
.num { font-variant-numeric: tabular-nums; }

/* ── Knoppen ────────────────────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 56px; padding: 14px 24px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--wine); color: #fff; font-weight: 620; font-size: 1.0625rem; letter-spacing: -0.005em;
  text-decoration: none; transition: background-color .15s ease, transform .1s ease;
}
.btn:hover { background: var(--wine-deep); }
.btn:active { transform: scale(0.985); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: transparent; }
.btn.wa { background: #1F7A4D; }
.btn.wa:hover { background: #17603C; }
.btn.inline { display: inline-flex; width: auto; }
.btn svg { width: 20px; height: 20px; }
.stack { display: grid; gap: 10px; margin-top: 22px; }
.linkbtn { background: none; border: 0; padding: 8px 0; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 0.9375rem; }
.linkbtn:hover { color: var(--wine); }

/* ── Formulieren ────────────────────────────────────────────── */
.field { display: grid; gap: 7px; margin: 0 0 18px; }
.field label, .label { font-weight: 580; font-size: 0.9875rem; }
.field .hint { font-size: 0.875rem; color: var(--muted); }
input[type=text], input[type=email], input[type=date], input[type=time], textarea {
  width: 100%; min-height: 54px; padding: 13px 16px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--sheet); font-size: 1.0625rem; appearance: none; -webkit-appearance: none;
}
textarea { min-height: 96px; resize: vertical; }
input:focus, textarea:focus { outline: none; border-color: var(--wine); box-shadow: 0 0 0 4px rgba(125, 46, 51, .12); }
.row2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; border: 0; padding: 0; }
.chips legend { margin-bottom: 9px; font-weight: 580; font-size: 0.9875rem; padding: 0; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span { display: inline-block; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--sheet); font-size: 0.9875rem; font-weight: 520; }
.chip input:checked + span { background: var(--ink); color: var(--paper); box-shadow: none; }
.chip input:focus-visible + span { outline: 3px solid var(--wine); outline-offset: 2px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 0.9875rem; color: var(--ink-2); margin: 4px 0 6px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--wine); flex: none; }
.why { margin: 14px 0 0; border-top: 1px solid var(--line); padding-top: 12px; }
.why summary { cursor: pointer; font-weight: 580; font-size: 0.9875rem; color: var(--wine); list-style: none; }
.why summary::-webkit-details-marker { display: none; }
.why summary::after { content: ' +'; }
.why[open] summary::after { content: ' −'; }
.why p { font-size: 0.9375rem; color: var(--ink-2); margin: 10px 0 0; }
.why p:last-child { font-family: var(--serif); font-style: italic; color: var(--wine); font-size: 1.125rem; }
.error { color: var(--wine); font-weight: 560; font-size: 0.9375rem; min-height: 1.4em; margin: 8px 0 0; }

/* ── De kring van acht ──────────────────────────────────────── */
.ring { width: min(220px, 62vw); margin: 30px 0 12px; }
.ring circle { transition: fill .3s ease; }
.ring .seat-taken { fill: var(--wine); }
.ring .seat-invited { fill: var(--coral); }
.ring .seat-empty { fill: none; stroke: #D8CCC6; stroke-width: 2; }
.ring .seat-me-halo { fill: none; stroke: var(--wine); stroke-width: 1.5; }
.ring .seat-you { fill: var(--coral-tint); stroke: var(--coral); stroke-width: 3; }
.ring .you-pulse { fill: none; stroke: var(--coral); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; animation: pulse 2.4s ease-out 1.2s infinite; }
.ring.animate .seat-taken { animation: seatin .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 90ms + 150ms); transform-box: fill-box; transform-origin: center; }
@keyframes seatin { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes pulse { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.ring-caption { font-size: 0.9875rem; color: var(--ink-2); margin: 0 0 6px; }
.ring-row { display: flex; align-items: center; gap: 22px; }
.ring-row .ring { width: 120px; margin: 0; flex: none; }

/* ── Feiten (wat, wanneer, waar) ────────────────────────────── */
.facts { margin: 28px 0 0; border-top: 1.5px solid var(--ink); }
.facts div { display: grid; grid-template-columns: 7rem 1fr; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 0.9375rem; padding-top: 1px; }
.facts dd { margin: 0; font-weight: 520; }

/* ── Panelen ────────────────────────────────────────────────── */
.panel { background: var(--sheet); border: 1px solid var(--line); border-radius: 22px; padding: 22px; margin: 26px 0 0; }
.panel.tint { background: var(--tint); border-color: transparent; }
.panel > :last-child { margin-bottom: 0; }
.timer { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; row-gap: 2px; margin: 26px 0 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.timer strong { color: var(--coral-ink); white-space: nowrap; font-size: clamp(1.4rem, 6vw, 1.75rem); letter-spacing: -0.03em; font-weight: 600; font-variant-numeric: tabular-nums; }
.timer span { color: var(--muted); font-size: 0.9375rem; }
.banner { display: inline-block; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 6px 13px; font-size: 0.875rem; font-weight: 560; margin: 0 0 18px; }
.message { white-space: pre-wrap; overflow-wrap: anywhere; background: #E7F3EA; color: #1E3326; border-radius: 18px 18px 18px 4px; padding: 14px 16px; font-size: 0.9875rem; line-height: 1.45; margin: 4px 0 16px; }
.guest-list { list-style: none; margin: 12px 0 0; padding: 0; }
.guest-list li { display: grid; grid-template-columns: 2rem 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.guest-list li:last-child { border-bottom: 0; }
.guest-list .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.guest-list .who { font-weight: 560; }
.guest-list .by { display: block; font-size: 0.875rem; color: var(--muted); font-weight: 400; }
.success { width: 44px; height: 44px; border-radius: 50%; background: var(--wine); color: #fff; display: grid; place-items: center; margin: 0 0 18px; }
.success svg { width: 22px; height: 22px; }

/* ── Bouwstappen ────────────────────────────────────────────── */
.progress { display: flex; gap: 6px; margin: 4px 0 26px; }
.progress span { height: 4px; flex: 1; border-radius: 4px; background: var(--line); }
.progress span.on { background: var(--wine); }
.step-nav { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 26px; }
.step-nav .btn.ghost { padding: 14px 22px; }

/* ── Website ────────────────────────────────────────────────── */
.hero { display: grid; gap: 40px; max-width: 72rem; margin: 0 auto; padding: 12px 0 24px; }
.hero .display { font-size: clamp(3rem, 14vw, 6.5rem); }
.hero .lede { max-width: 30ch; }
.hero .stack { max-width: 24rem; }
.invite-card {
  background: var(--sheet); border-radius: 30px; padding: 30px 26px 26px; border: 1px solid var(--line);
  max-width: 26rem; width: 100%; justify-self: center; transform: rotate(-1.6deg);
  box-shadow: 0 30px 60px -30px rgba(95, 33, 38, .28);
}
.invite-card .display { font-size: clamp(2.2rem, 9vw, 2.9rem); margin-bottom: 14px; }
.invite-card .ring { width: 140px; margin: 22px 0 18px; }
.invite-card .fake-btn { background: var(--wine); color: #fff; border-radius: 999px; padding: 15px; text-align: center; font-weight: 620; }
.invite-card .meta { margin-bottom: 16px; }

.section { max-width: 72rem; margin: 0 auto; padding: 64px 0 0; }
.section > h2 { max-width: 18ch; }
.howto { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 0; }
.howto li { display: grid; align-content: start; grid-template-columns: 52px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.howto li:last-child { border-bottom: 1px solid var(--line); }
.howto .ring { width: 52px; margin: 2px 0 0; }
.howto p { color: var(--ink-2); margin: 0; max-width: 46ch; }

.manifest { background: var(--ink); color: var(--paper); border-radius: 30px; padding: 40px 26px; margin: 64px auto 0; max-width: 72rem; }
.manifest h2 { font-size: clamp(1.9rem, 7.5vw, 3.4rem); max-width: 20ch; margin-bottom: 22px; }
.manifest p { color: #D9CFCB; max-width: 52ch; }
.manifest .jou { color: #E7B7AE; }
.manifest .whisper { color: #E7B7AE; font-size: 1.75rem; margin-top: 26px; }

.rules { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 0; }
.rules li { padding: 16px 0 16px 30px; border-top: 1px solid var(--line); position: relative; color: var(--ink-2); max-width: 52ch; }
.rules li::before { content: ''; position: absolute; left: 4px; top: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--wine); }
.rules strong { color: var(--ink); font-weight: 600; }

.closing { text-align: left; }
.closing .display { font-size: clamp(2.4rem, 10vw, 4.75rem); max-width: 14ch; }
.closing .btn { max-width: 22rem; }

.foot { max-width: calc(72rem + 2 * var(--gutter)); margin: 72px auto 0; padding: 24px var(--gutter) 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 0.9375rem; border-top: 1px solid var(--line); }
.foot a { color: var(--muted); text-decoration: none; margin-left: 18px; }
.foot a:first-child { margin-left: 0; }
.foot a:hover { color: var(--wine); }

.list { list-style: none; padding: 0; margin: 22px 0 0; }
.list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; }
.list li:last-child a { border-bottom: 1px solid var(--line); }
.list .t { font-weight: 600; }
.list .d { color: var(--muted); font-size: 0.9375rem; }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: 12px 20px; border-radius: 999px; font-size: 0.9375rem; font-weight: 520; z-index: 10; animation: toast .25s ease both; }
@keyframes toast { from { opacity: 0; transform: translate(-50%, 8px); } }

.loading { padding: 80px 0; color: var(--muted); }

/* ── Ervaringen en over ─────────────────────────────────────── */
.story p { font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); max-width: 60ch; margin: 0 0 16px; }
.reviews { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 14px; }
.reviews li { background: var(--sheet); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.reviews blockquote { margin: 0; }
.reviews blockquote p { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.5; }
.reviews .who { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 0.9375rem; color: var(--muted); }
.stars { display: inline-flex; gap: 4px; }
.stars i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #D8CCC6; }
.stars i.on { background: var(--wine); box-shadow: none; }
@media (min-width: 900px) { #home-reviews .reviews { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 900px) {
  :root { --gutter: 40px; }
  .hero { grid-template-columns: 1.15fr .85fr; align-items: center; padding-top: 48px; gap: 64px; }
  .section { padding-top: 110px; }
  .howto { grid-template-columns: repeat(4, 1fr); gap: 28px; }
  .howto li { grid-template-columns: 1fr; border-top: 1.5px solid var(--ink); border-bottom: 0 !important; padding-top: 22px; }
  .manifest { padding: 72px 64px; margin-top: 110px; }
  .rules { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ring .you-pulse { display: none; }
}

/* Beginscherm-kaart en stappen */
.install .install-head { display: flex; gap: 14px; align-items: flex-start; }
.install .install-head img { width: 52px; height: 52px; border-radius: 13px; flex: none; box-shadow: 0 2px 10px rgba(35, 28, 28, .12); }
.install h3 { margin: 2px 0 0; }
.steps { list-style: none; counter-reset: s; padding: 0; margin: 16px 0 0; }
.steps li { counter-increment: s; position: relative; padding: 0 0 14px 40px; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--blush); color: var(--wine); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.steps strong { display: block; }
.steps span { display: block; color: var(--ink-2); font-size: 15px; line-height: 1.45; }

[hidden] { display: none !important; }

/* Seintjes */
.install .bell { width: 52px; height: 52px; border-radius: 13px; flex: none; background: var(--coral-tint); color: var(--coral-ink); display: grid; place-items: center; }
.install .bell svg { width: 26px; height: 26px; }
.notify-on { display: flex; align-items: center; gap: 8px; margin-top: 22px; }
.notify-on svg { width: 18px; height: 18px; color: var(--coral); flex: none; }
.notify-on .linkbtn { margin: 0 0 0 auto; }
.story h2 { margin: 34px 0 10px; font-size: 1.3rem; }
.whisper + .whisper { margin-top: 10px; }