/* The visual name (wordmark), the entry intro and the sign-up pop-up. Colours come from style.css. */
.wm { font-size: 17px; font-weight: 600; margin-right: 10px; line-height: 1.2; color: var(--ink); text-decoration: none; }
.wm .wm-t, .wm .wm-l { font: inherit; color: inherit; margin: 0; }
.wm .wm-l { white-space: nowrap; }
/* "makkelijk": a small footnote attached to "Lekker" (lowered, right behind it) */
.wm .wm-note { font-size: .5em; font-weight: 400; color: var(--muted); margin-left: .2em; vertical-align: sub; letter-spacing: 0; }
.tagline { font-size: 17px; color: var(--muted); margin: -4px 0 12px; }

/* Entry intro: the name appears large, then settles into the header (brand.js). */
html.cvil-intro .bar .wm { visibility: hidden; }
#cvil-intro { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
              background: var(--bg); transition: opacity .45s ease; cursor: pointer; }
#cvil-intro.out { opacity: 0; }
#cvil-intro .big { display: inline-block; font-size: clamp(26px, 6.4vw, 62px); font-weight: 600; line-height: 1.2;
                   text-align: center; padding: 0 20px; color: var(--ink); transform-origin: 0 0;
                   transition: transform .6s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
#cvil-intro .big .wm-note { font-size: .42em; }

/* Sign-up pop-up */
.pop { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center;
       padding: 16px; background: rgba(10, 16, 24, .55); }
.pop-card { position: relative; width: 100%; max-width: 440px; background: var(--card); color: var(--ink);
            border: 1px solid var(--line); border-radius: 14px; padding: 22px 22px 16px; box-shadow: 0 14px 50px rgba(0, 0, 0, .35); }
.pop-card h2 { margin: 0 24px 8px 0; font-size: 21px; line-height: 1.25; }
.pop-card p { margin: 0 0 12px; font-size: 14.5px; }
.pop-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; font-size: 26px; line-height: 1;
         color: var(--muted); cursor: pointer; padding: 2px 8px; }
.pop-form { display: grid !important; grid-template-columns: 1fr !important; gap: 10px; margin: 0; }
.pop-form input[type=email] { width: 100%; box-sizing: border-box; font-size: 16px; padding: 10px 12px; }
.pop-form .cta { width: 100%; padding: 11px 16px; font-size: 16px; border: 0; cursor: pointer; color: #fff; background: var(--accent); border-radius: 8px; font-weight: 600; }
.pop-form label.consent { font-size: 12.5px; }
.pop-form input[type=email]::placeholder { color: var(--muted); opacity: .8; }
.pop-msg { font-weight: 600; color: var(--pass); margin-top: 10px !important; }
.pop-msg.err { color: var(--fail); }
.pop-fine { color: var(--muted); font-size: 12px !important; margin: 10px 0 0 !important; }
@media (prefers-reduced-motion: reduce) { #cvil-intro, #cvil-intro .big { transition: none; } }