/* ==========================================================================
   Knoes.nl — huisstijl
   Kleuren, typografie en componenten volgens de design-handoff.
   Geen afgeronde hoeken; warm, aards, museaal.
   ========================================================================== */

:root{
  --paper:#F1EBE0; --paper2:#E8E0D1; --ink:#2A2420; --ink2:#6E6153;
  --rust:#A85632; --line:#D6CCBB; --panel:#221D18; --panel2:#2E2820;
  --green:#4E7A4E;
  --serif:'Spectral',Georgia,serif;
  --mono:'Space Mono','SF Mono',ui-monospace,monospace;
  --shadow:0 30px 60px -40px rgba(42,36,32,.5);
  --wrap:1280px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;}
a{color:var(--rust);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--ink);}
::selection{background:var(--rust);color:var(--paper);}

/* --- Layout --------------------------------------------------------------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,5vw,64px);}
.section{padding:clamp(40px,5vw,72px) 0;}
/* Eerste sectie direct onder de header: minder lege ruimte bovenaan. */
main > .section:first-child{padding-top:clamp(24px,3vw,40px);}

/* --- Typografie ----------------------------------------------------------- */
.kicker{
  font-family:var(--mono);
  font-size:clamp(12px,1.1vw,15px);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rust);
}
h1,h2,h3{font-weight:500;letter-spacing:-.01em;line-height:1.04;}
.display{font-size:clamp(40px,6.4vw,78px);line-height:1.02;letter-spacing:-.02em;}
.display em,.h-em{font-style:italic;}
h2.title{font-size:clamp(32px,4.6vw,56px);}
.lead{font-size:clamp(18px,1.7vw,22px);color:var(--ink2);line-height:1.55;}
.mono{font-family:var(--mono);}

/* --- Knoppen -------------------------------------------------------------- */
.btn{
  display:inline-block;
  font-family:var(--mono);
  font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--ink);
  color:var(--paper);
  padding:15px 28px;
  border:1px solid var(--ink);
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.btn:hover{background:var(--rust);border-color:var(--rust);color:var(--paper);}
.btn--rust{background:var(--rust);border-color:var(--rust);}
.btn--rust:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);}
.btn--ghost{background:transparent;color:var(--ink);}
.btn--ghost:hover{background:var(--ink);color:var(--paper);}

/* --- Merkteken (woordmerk) ------------------------------------------------ */
.brand{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3vw,34px);color:var(--ink);letter-spacing:-.01em;}
.brand .e{color:var(--rust);}

/* --- Header / navigatie --------------------------------------------------- */
.site-header{
  border-bottom:1px solid var(--line);
  background:var(--paper);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:22px;padding-bottom:22px;}
.nav{display:flex;gap:clamp(20px,3vw,38px);align-items:center;}
.nav a{
  font-family:var(--mono);
  font-size:clamp(13px,1.1vw,15px);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink2);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink);}
.nav-toggle{display:none;background:none;border:none;font-size:26px;color:var(--ink);cursor:pointer;font-family:var(--mono);line-height:1;}
/* Taalschakelaar */
.lang-switch{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:clamp(12px,1vw,14px);letter-spacing:.06em;}
.lang-switch a{color:var(--ink2);}
.lang-switch a.on{color:var(--rust);}
.lang-switch a:hover{color:var(--ink);}
.lang-switch .sep{color:var(--line);}

/* --- Home hero (binnen .wrap: uitgelijnd op logo/menu, net als de rest) --- */
.hero{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  border-bottom:1px solid var(--line);
  min-height:min(70vh,600px);
}
/* Links geen padding -> tekst lijnt exact uit op het logo. Rechts wat ruimte
   voor de scheidingslijn met het beeld. */
.hero-text{padding:clamp(40px,6vw,84px) clamp(32px,4vw,56px) clamp(40px,6vw,84px) 0;display:flex;flex-direction:column;justify-content:center;}
.hero-text .kicker{margin-bottom:24px;}
.hero-text .lead{margin-top:24px;max-width:520px;}
.hero-text .btn{margin-top:36px;align-self:flex-start;}
.hero-media{border-left:1px solid var(--line);background:var(--paper2);overflow:hidden;}
.hero-media img{width:100%;height:100%;object-fit:cover;}

/* --- Slider ('Hoe') ------------------------------------------------------- */
.slider-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px;}
.slider-head .lead{margin-top:12px;max-width:560px;}
.slider-nav{display:flex;gap:12px;flex-shrink:0;}
.slider-btn{
  width:clamp(52px,5vw,64px);height:clamp(52px,5vw,64px);
  border:1px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:26px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease,opacity .18s ease;
}
.slider-btn:hover{background:var(--ink);color:var(--paper);}
.slider-btn--solid{background:var(--ink);color:var(--paper);}
.slider-btn--solid:hover{background:var(--rust);border-color:var(--rust);}
.slider-btn:disabled{opacity:.3;cursor:default;background:var(--paper);color:var(--ink);}
.slider-viewport{overflow:hidden;}
.slider-track{
  display:flex;gap:32px;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}

/* --- Werkkaart ------------------------------------------------------------ */
.card{flex:0 0 380px;max-width:380px;display:flex;flex-direction:column;text-decoration:none;color:var(--ink);}
.card-media{height:300px;background:var(--paper2);border:1px solid var(--line);position:relative;overflow:hidden;}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.card:hover .card-media img{transform:scale(1.04);}
.card:hover .card-media{border-color:var(--rust);}
.badge{
  position:absolute;top:14px;right:14px;
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);padding:6px 11px;
}
.badge--verkocht{color:var(--ink2);}
.card-body{padding:18px 2px 0;}
.card-title{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);font-weight:500;}
.card-tech{font-family:var(--mono);font-size:14px;color:var(--ink2);margin-top:8px;line-height:1.4;}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-family:var(--mono);font-size:14px;}
.card-foot .price{color:var(--ink);}
.card-foot .more{letter-spacing:.06em;text-transform:uppercase;color:var(--rust);}

/* --- Werk-grid (overzicht) ------------------------------------------------ */
.work-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(24px,3vw,40px);}
.work-grid .card{flex:initial;max-width:none;}

/* --- Detailpagina --------------------------------------------------------- */
.detail{
  display:grid;grid-template-columns:1.15fr 1fr;
  border:1px solid var(--line);overflow:hidden;box-shadow:var(--shadow);
}
.detail-media{border-right:1px solid var(--line);position:relative;overflow:hidden;background:var(--paper2);min-height:420px;}
.detail-media img.main{width:100%;height:100%;object-fit:cover;}
.detail-thumbs{position:absolute;left:24px;bottom:24px;display:flex;gap:12px;}
.detail-thumbs button{padding:0;border:2px solid var(--paper);background:none;width:76px;height:76px;overflow:hidden;cursor:pointer;box-shadow:0 6px 18px -8px rgba(42,36,32,.6);}
.detail-thumbs img{width:100%;height:100%;object-fit:cover;}
.detail-body{padding:clamp(32px,4vw,60px);display:flex;flex-direction:column;}
.detail-body h1{font-size:clamp(34px,4.4vw,60px);margin-top:18px;}
.meta{
  font-family:var(--mono);font-size:15px;color:var(--ink2);line-height:2;
  margin-top:24px;border-top:1px solid var(--line);padding-top:20px;
}
.meta .label{color:var(--rust);}
.detail-body p.desc{font-size:clamp(18px,1.7vw,22px);line-height:1.55;color:var(--ink);margin-top:22px;}
.detail-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:24px;margin-top:32px;}
.detail-foot .price{font-family:var(--serif);font-size:clamp(26px,3vw,38px);}
.back-link{font-family:var(--mono);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);display:inline-block;margin-bottom:24px;}
.back-link:hover{color:var(--rust);}

/* --- Over / tekstpagina --------------------------------------------------- */
.prose{max-width:720px;}
.prose p{font-size:clamp(18px,1.8vw,23px);line-height:1.6;color:var(--ink);margin-top:20px;}
.prose p:first-child{margin-top:0;}

/* --- Contact / formulier -------------------------------------------------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.field.full{grid-column:1/-1;}
label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);}
input,textarea,select{
  font-family:var(--serif);font-size:18px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);
  padding:14px 16px;width:100%;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--ink);}
textarea{resize:vertical;min-height:140px;line-height:1.5;}
.form-note{font-family:var(--mono);font-size:13px;color:var(--ink2);margin-top:6px;}

/* --- Meldingen ------------------------------------------------------------ */
.notice{border:1px solid var(--line);padding:18px 22px;font-size:17px;margin-bottom:28px;border-left:3px solid var(--rust);}
.notice--ok{border-left-color:var(--green);background:var(--paper2);}
.notice--err{border-left-color:#B4482E;background:#F3E4DC;}

/* --- Footer --------------------------------------------------------------- */
.site-footer{border-top:1px solid var(--line);margin-top:clamp(48px,7vw,96px);background:var(--paper);}
.site-footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding-top:40px;padding-bottom:40px;}
.site-footer .brand{font-size:26px;}
.footer-meta{font-family:var(--mono);font-size:13px;color:var(--ink2);letter-spacing:.06em;}
.footer-nav{display:flex;gap:24px;}
.footer-nav a{font-family:var(--mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);}
.footer-nav a:hover{color:var(--rust);}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero-text{padding:clamp(32px,7vw,56px) 0;}
  .hero-media{border-left:none;border-top:1px solid var(--line);aspect-ratio:4/3;}
  .detail{grid-template-columns:1fr;}
  .detail-media{border-right:none;border-bottom:1px solid var(--line);aspect-ratio:4/3;min-height:0;}
  .form-grid{grid-template-columns:1fr;}
  .card{flex:0 0 78vw;max-width:78vw;}
}
@media (max-width:640px){
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--paper);border-bottom:1px solid var(--line);
  }
  .nav.open{display:flex;}
  .nav a{padding:16px clamp(20px,5vw,64px);border-top:1px solid var(--line);}
  .lang-switch{padding:16px clamp(20px,5vw,64px);border-top:1px solid var(--line);justify-content:flex-start;}
  .nav-toggle{display:block;}
  .site-header .wrap{position:relative;}
}