:root{
    --mosterd: #DDA840;
    --mosterd-diep: #C79333;
    --inkt: #223A32;
    --inkt-zacht: #2E4B41;
    --room: #FBF3E4;
    --ivoor: #FFFBF2;
    --draad: #B24A32;
    --draad-donker: #98391F;
    --lijn: rgba(34,58,50,0.22);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--room);
    color:var(--inkt);
    font-family:'Work Sans', sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    margin:0;
    color:var(--inkt);
  }
  .eyebrow{
    font-family:'Space Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--draad-donker);
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  section{padding:5.5rem 1.5rem;}
  .wrap{max-width:1080px;margin:0 auto;}

  /* stitched divider — the signature motif, echoes the needle & thread in the logo */
  .stitch{
    height:1px;
    background-image:linear-gradient(to right, var(--inkt) 55%, transparent 0%);
    background-position:top;
    background-size:14px 1px;
    background-repeat:repeat-x;
    opacity:0.45;
  }
  .stitch.dik{background-size:16px 2px;height:2px;}

  /* ---------- NAV ---------- */
  header{
    position:sticky;top:0;z-index:50;
    background:var(--ivoor);
    border-bottom:1px solid var(--lijn);
  }
  nav.wrap{
    display:flex;align-items:center;justify-content:space-between;
    padding:0.7rem 1.5rem;
    max-width:1080px;
  }
  .brand{display:flex;align-items:center;gap:0.6rem;text-decoration:none;}
  .brand img{width:42px;height:42px;border-radius:50%;}
  .brand span{font-family:'Fraunces', serif;font-style:italic;font-size:1.3rem;color:var(--inkt);}
  .navlinks{display:flex;gap:1.8rem;list-style:none;margin:0;padding:0;}
  .navlinks a{
    text-decoration:none;font-size:0.92rem;font-weight:500;color:var(--inkt-zacht);
    padding:0.3rem 0;border-bottom:1px solid transparent;
  }
  .navlinks a:hover{border-color:var(--draad);color:var(--inkt);}
  .navlinks a:focus-visible, a.knop:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--draad); outline-offset:2px;
  }
  #menutoggle{display:none;background:none;border:none;font-family:'Space Mono',monospace;font-size:0.85rem;color:var(--inkt);cursor:pointer;}

  /* ---------- HERO ---------- */
  .hero{
    background:var(--mosterd);
    padding:4.5rem 1.5rem 5rem;
    position:relative;
    overflow:hidden;
  }
  .hero .wrap{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:3rem;
  }
  .hero-tekst .eyebrow{color:var(--inkt);opacity:0.75;}
  .hero h1{
    font-size:clamp(2.3rem, 4vw, 3.4rem);
    line-height:1.08;
    margin-top:0.6rem;
  }
  .hero h1 em{font-style:italic;color:var(--ivoor);}
  .hero p.lead{
    max-width:34ch;
    margin-top:1.1rem;
    font-size:1.08rem;
    color:var(--inkt-zacht);
  }
  .hero-acties{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap;}
  .knop{
    display:inline-block;
    font-family:'Space Mono', monospace;
    font-size:0.85rem;
    letter-spacing:0.03em;
    text-decoration:none;
    padding:0.85rem 1.5rem;
    border-radius:2px;
    border:1px solid var(--inkt);
    transition:transform 0.15s ease;
  }
  .knop:hover{transform:translateY(-2px);}
  .knop.primair{background:var(--inkt);color:var(--room);}
  .knop.secundair{background:transparent;color:var(--inkt);}
  .knop.rood{background:var(--draad);border-color:var(--draad);color:var(--ivoor);}
  .knop.rood:hover{background:var(--draad-donker);}

  .hero-logo{
    display:flex;justify-content:center;
    animation:zweven 7s ease-in-out infinite;
  }
  .hero-logo img{
    width:min(340px, 80%);
    border-radius:50%;
    box-shadow:0 18px 40px -12px rgba(34,58,50,0.35);
  }
  @keyframes zweven{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
  }
  @media (prefers-reduced-motion: reduce){
    .hero-logo{animation:none;}
  }

  /* meetlint (measuring tape) rule — ties to the tape measure in the logo */
  .meetlint{
    display:flex;align-items:flex-end;gap:0;margin-top:2.8rem;
    font-family:'Space Mono', monospace;font-size:0.65rem;color:var(--inkt);opacity:0.6;
  }
  .meetlint span{flex:1;text-align:center;border-left:1px solid var(--inkt);padding-bottom:2px;}
  .meetlint span:first-child{border-left:none;}

  /* ---------- OVER ---------- */
  .over{background:var(--room);}
  .over .wrap{
    display:grid;grid-template-columns:0.85fr 1.15fr;gap:3.5rem;align-items:center;
  }
  .over-beeld{
    background:var(--mosterd);
    width:280px;height:280px;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    border:6px solid var(--mosterd);
    box-shadow:0 18px 40px -14px rgba(34,58,50,0.35);
    flex-shrink:0;
  }
  .over-beeld img{width:100%;height:100%;object-fit:cover;display:block;}
  .over h2{font-size:2rem;margin-bottom:1rem;}
  .over p{color:var(--inkt-zacht);max-width:56ch;}
  .kenmerken{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;gap:0.7rem;}
  .kenmerken li{display:flex;gap:0.7rem;font-size:0.95rem;color:var(--inkt);}
  .kenmerken li::before{content:"—";color:var(--draad);font-weight:700;}

  /* ---------- WORKSHOPS ---------- */
  .workshops{background:var(--ivoor);}
  .atelier{background:var(--room);}
  .galerij{
    display:grid;grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:1.4rem;
  }
  .foto-plek{
    aspect-ratio:4/3;
    border:1px dashed var(--inkt);
    opacity:0.85;
    display:flex;align-items:center;justify-content:center;
    background:var(--ivoor);
  }
  .foto-plek span{
    font-family:'Space Mono',monospace;font-size:0.78rem;
    color:var(--inkt-zacht);letter-spacing:0.04em;
  }
  .sectie-kop{max-width:60ch;margin-bottom:3rem;}
  .sectie-kop h2{font-size:2rem;margin-top:0.5rem;}
  .sectie-kop p{color:var(--inkt-zacht);margin-top:0.6rem;}

  .kaarten{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:1.6rem;
  }
  .kaart{
    background:var(--room);
    border:1px solid var(--lijn);
    padding:1.8rem 1.6rem 1.6rem;
    position:relative;
    display:flex;flex-direction:column;
    min-height:100%;
  }
  .kaart::before{
    content:"";position:absolute;top:10px;left:10px;right:10px;bottom:10px;
    border:1px dashed var(--inkt);opacity:0.18;pointer-events:none;
  }
  .kaart h3{font-size:1.3rem;}
  .kaart .niveau{font-family:'Space Mono',monospace;font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--draad-donker);margin-bottom:0.5rem;}
  .kaart p{color:var(--inkt-zacht);font-size:0.94rem;flex-grow:1;margin:0.7rem 0 1rem;}
  .kaart .meta{
    display:flex;justify-content:space-between;
    font-family:'Space Mono',monospace;font-size:0.78rem;
    border-top:1px dashed var(--lijn);padding-top:0.8rem;margin-bottom:0.6rem;
  }
  .kaart .materialen{
    list-style:disc;padding-left:1.1rem;margin:0 0 1.1rem;
    font-size:0.85rem;color:var(--inkt-zacht);display:grid;gap:0.3rem;
  }
  .kaart .sub-label{
    font-family:'Space Mono',monospace;font-size:0.7rem;text-transform:uppercase;
    letter-spacing:0.06em;color:var(--draad-donker);margin:0.7rem 0 0.4rem;
  }
  .plaatsen{
    font-family:'Space Mono',monospace;font-size:0.75rem;
    margin-bottom:1.1rem;padding:0.35rem 0.6rem;
    background:var(--room);border:1px solid var(--lijn);
    display:inline-block;color:var(--inkt-zacht);
  }
  .plaatsen.vol{color:var(--draad-donker);border-color:var(--draad);}
  .kaart a.knop{text-align:center;font-size:0.78rem;padding:0.7rem 1rem;}

  /* ---------- BOEKEN ---------- */
  .boeken{background:var(--mosterd);}
  .boeken .wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:3rem;}
  .boeken .sectie-kop p, .boeken .eyebrow{color:var(--inkt);}
  .boeken .sectie-kop p{opacity:0.8;}
  .contact-info{margin-top:2rem;display:grid;gap:0.9rem;font-size:0.94rem;}
  .contact-info strong{font-family:'Space Mono',monospace;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.08em;display:block;opacity:0.65;margin-bottom:0.15rem;}

  form{
    background:var(--ivoor);
    padding:2.2rem;
    border:1px solid var(--inkt);
    display:grid;gap:1.1rem;
  }
  .veldgroep{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
  label{
    display:flex;flex-direction:column;gap:0.4rem;
    font-size:0.82rem;color:var(--inkt-zacht);font-weight:500;
  }
  input, select, textarea{
    font-family:'Work Sans', sans-serif;
    font-size:0.95rem;
    padding:0.65rem 0.7rem;
    border:1px solid var(--lijn);
    background:var(--room);
    color:var(--inkt);
    border-radius:1px;
  }
  textarea{resize:vertical;min-height:80px;}
  form button{
    justify-self:start;margin-top:0.4rem;cursor:pointer;
    font-family:'Space Mono', monospace;font-size:0.85rem;
    padding:0.85rem 1.7rem;background:var(--draad);color:var(--ivoor);
    border:1px solid var(--draad); border-radius:2px;
  }
  form button:hover{background:var(--draad-donker);}
  .form-note{font-size:0.78rem;color:var(--inkt-zacht);opacity:0.75;margin-top:-0.3rem;}

  /* ---------- FOOTER ---------- */
  footer{
    background:var(--inkt);color:var(--room);
    padding:3rem 1.5rem 2rem;
  }
  footer .wrap{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:1.5rem;}
  footer .brand span{color:var(--room);}
  footer .stitch{background-image:linear-gradient(to right, var(--room) 55%, transparent 0%);opacity:0.3;margin-bottom:2rem;}
  footer small{font-family:'Space Mono',monospace;font-size:0.72rem;opacity:0.55;}
  footer nav a{font-size:0.85rem;text-decoration:none;color:var(--room);opacity:0.8;margin-left:1.3rem;}
  footer nav a:first-child{margin-left:0;}

  @media (max-width:820px){
    .hero .wrap, .over .wrap, .boeken .wrap{grid-template-columns:1fr;}
    .hero-logo{order:-1;}
    .over-beeld{margin:0 auto;}
    .veldgroep{grid-template-columns:1fr;}
    .navlinks{
      position:absolute;top:100%;left:0;right:0;
      background:var(--ivoor);flex-direction:column;gap:0;
      border-bottom:1px solid var(--lijn);
      display:none;
    }
    .navlinks.open{display:flex;}
    .navlinks a{padding:0.9rem 1.5rem;border-bottom:1px solid var(--lijn);width:100%;}
    #menutoggle{display:block;}
  }