/* Het Tolhuys — Coming Soon (productie) — mobile-first */
:root{
--linen-50:#F7F1E6;--linen-100:#F0E7D7;--oak-300:#B18E68;--oak-700:#5E4230;
--terracotta-500:#BC6842;--terracotta-600:#A2542F;
--sage-200:#CBCDB1;--forest-700:#3B4A36;--gold-500:#CDA04B;
--ink-900:#2A211A;--ink-700:#4A3E33;--ink-500:#6E6053;--ink-300:#9C8E7E;
--surface:#FDFAF3;--border-strong:var(--oak-300);
--accent:var(--terracotta-500);--accent-hover:var(--terracotta-600);--text-on-accent:#FCF3EA;
--font-display:'Quicksand','All Round Gothic',system-ui,sans-serif;
--font-body:'Manrope','Azo Sans',system-ui,sans-serif;
--radius-sm:6px;--radius-md:12px;--radius-pill:999px;--radius-arch:999px 999px 0 0;
--shadow-lg:0 18px 48px rgba(61,44,32,.12);
--ease-soft:cubic-bezier(.22,.61,.36,1);--dur-fast:160ms;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--linen-50);color:var(--ink-900);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:var(--accent)}
a:hover{color:var(--accent-hover)}
:focus-visible{outline:2px solid var(--gold-500);outline-offset:2px}
/* layout — mobile: image boven, tekst eronder */
.split{min-height:100svh;display:grid;grid-template-columns:1fr}
.pane-media{position:relative;overflow:hidden;min-height:min(56vh,420px)}
.pane-text{position:relative;background:var(--linen-50);overflow:hidden;display:flex;flex-direction:column;padding:clamp(32px,4vw,64px) clamp(24px,5vw,88px)}
.deco{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.content{position:relative;z-index:1;display:flex;flex-direction:column;flex:1}
.logo-link{align-self:flex-start;display:inline-flex}
.logo-link img{height:110px;width:auto}
.copy{flex:1;display:flex;flex-direction:column;justify-content:center;max-width:500px;width:100%;padding:clamp(28px,4vw,48px) 0}
h1{font-family:var(--font-display);font-weight:500;font-size:clamp(1.9rem,4.2vw,3.15rem);letter-spacing:-.01em;line-height:1.16;margin:0}
.lead{font-size:1rem;line-height:1.65;color:var(--ink-700);margin:28px 0 0;max-width:400px;text-wrap:pretty}
h2{font-family:var(--font-display);font-weight:500;font-size:clamp(1.6rem,3vw,2.25rem);letter-spacing:-.01em;color:var(--accent);margin:34px 0 0;line-height:1.1}
/* socials */
.socials{display:flex;gap:12px;margin:26px 0 0;padding:0;list-style:none}
.socials a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-pill);border:1px solid var(--border-strong);color:var(--oak-700);transition:background var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft),border-color var(--dur-fast) var(--ease-soft)}
.socials a:hover,.socials a:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
/* form */
.subscribe{margin:34px 0 0}
.subscribe form{display:flex;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface)}
.subscribe input[type=email]{flex:1;min-width:0;border:none;outline:none;background:transparent;font-family:var(--font-body);font-size:.95rem;color:var(--ink-900);padding:14px 18px}
.subscribe input[type=email]:focus-visible{outline-offset:-2px}
.subscribe button{border:none;cursor:pointer;font-family:var(--font-body);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-accent);background:var(--accent);padding:14px 22px;transition:background var(--dur-fast) var(--ease-soft)}
.subscribe button:hover{background:var(--accent-hover)}
.form-note{font-size:.78rem;color:var(--ink-300);margin:10px 0 0}
.form-note.is-error{color:var(--accent-hover);font-weight:500}
.subscribe button[disabled]{opacity:.6;cursor:default}
.form-done{background:var(--sage-200);color:var(--forest-700);border-radius:var(--radius-md);padding:14px 18px;font-weight:500}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none !important}
/* gallery */
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 700ms var(--ease-soft)}
.gallery img.is-active{opacity:1}
.gallery-nav{position:absolute;right:clamp(14px,2vw,28px);top:50%;transform:translateY(-50%);z-index:3;display:flex;flex-direction:column;gap:12px}
.gallery-nav button{width:46px;height:46px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--linen-50);background:rgba(42,33,26,.42);border:1px solid rgba(247,241,230,.5);backdrop-filter:blur(4px);transition:background var(--dur-fast) var(--ease-soft),transform var(--dur-fast) var(--ease-soft)}
.gallery-nav button:hover,.gallery-nav button:focus-visible{background:var(--accent);border-color:var(--accent)}
.gallery-nav button:active{transform:scale(.94)}
/* arch overlay — alleen desktop */
.arch{display:none}
@media (min-width:901px){
.split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.pane-media{order:2;min-height:min(760px,100vh)}
.pane-text{order:1}
.logo-link img{height:150px}
.arch{display:block;position:absolute;top:50%;left:0;transform:translate(-38%,-50%);width:clamp(220px,30vw,360px);aspect-ratio:3/4;border-radius:var(--radius-arch);overflow:hidden;border:8px solid var(--linen-50);box-shadow:var(--shadow-lg);z-index:2}
.arch img{position:static;width:100%;height:100%;object-fit:cover;opacity:1}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.gallery img{transition:none}
*{transition-duration:.01ms !important}
}