@font-face{
    font-family:'Aujournuit Condensed';
    src:url('https://cdn.jsdelivr.net/gh/collletttivo/aujournuit@main/fonts/Aujournuit-Condensed.woff2') format('woff2'),
        url('https://cdn.jsdelivr.net/gh/collletttivo/aujournuit@main/fonts/Aujournuit-Condensed.woff') format('woff');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
  }
  :root{
    --blue:#93aecb;
    --blue-deep:#7c9ac0;
    --blue-pale:#a8c0da;
    --bordeaux:#5c1220;
    --bordeaux-deep:#4a0e1a;
    --terracotta:#af6552;
    --geel:#f7b65c;
    --cream:#f6ecd8;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--bordeaux);
    font-family:'General Sans', -apple-system, sans-serif;
    font-size:18px;
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{
    font-family:'General Sans', -apple-system, sans-serif;
    font-weight:600;
    margin:0;
  }
  a{color:inherit;}
  img{max-width:100%;}
  .wrap{
    max-width:1000px;
    margin:0 auto;
    padding:0 40px;
  }
  .eyebrow-label{
    display:inline-block;
    font-family:'General Sans', -apple-system, sans-serif;
    font-weight:500;
    font-size:13px;
    letter-spacing:3.5px;
    text-transform:uppercase;
    margin-bottom:18px;
  }
  .rule{
    width:56px;
    height:1px;
    margin:0 auto 26px;
    background:currentColor;
    opacity:0.4;
  }

  /* NAV */
  nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 40px;
    background:rgba(147,174,203,0.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(92,18,32,0.15);
  }
  .logo-img{display:block; height:26px; width:auto;}
  .back-link{
    font-family:'General Sans', -apple-system, sans-serif;
    font-size:15px;
    color:var(--bordeaux);
    text-decoration:none;
    opacity:0.85;
  }
  .back-link:hover{opacity:1;}

  /* HEADER */
  header.page-head{
    background:var(--blue-deep);
    color:var(--bordeaux);
    text-align:center;
    padding:170px 24px 90px;
  }
  header.page-head .eyebrow-label{color:var(--bordeaux); opacity:0.75;}
  header.page-head h1{
    font-size:clamp(38px, 6vw, 60px);
    margin-bottom:14px;
  }
  header.page-head .tagline{
    font-family:'Aujournuit Condensed', Georgia, serif;
    font-size:26px;
    opacity:0.85;
  }

  /* CONTENT */
  .content{padding:110px 0;}
  .content-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:64px;
    align-items:center;
  }
  .content-grid img{
    width:100%;
    height:auto;
    border-radius:4px;
    display:block;
  }
  .content h2{
    font-size:clamp(26px, 3vw, 34px);
    color:var(--bordeaux);
    margin-bottom:20px;
  }
  .content p{
    font-size:19px;
    color:var(--bordeaux);
    opacity:0.9;
    margin:0 0 16px;
  }
  .content p:last-child{margin-bottom:0;}
  @media (max-width:820px){
    .content-grid{grid-template-columns:1fr; gap:32px;}
  }

  /* single-column content (no image) */
  .content-solo{max-width:680px; margin:0 auto;}
  .content-solo h2{margin-bottom:20px;}

  /* extra block below the grid (full width text) */
  .content-extra{
    margin-top:70px;
    padding-top:60px;
    border-top:1px solid rgba(92,18,32,0.14);
  }
  /* a photo placed directly in content-extra (not inside .photo-gallery)
     gets the same treatment as the .content-grid photos: full width and
     a capped height, so a tall portrait photo doesn't tower over the
     page. */
  .content-extra > img{
    width:100%;
    max-height:480px;
    object-fit:cover;
    border-radius:4px;
    display:block;
    margin-bottom:24px;
  }
  .content-extra h3{
    font-size:22px;
    color:var(--bordeaux);
    margin-bottom:16px;
  }
  .content-extra p{
    font-size:18px;
    color:var(--bordeaux);
    opacity:0.9;
    margin:0 0 14px;
    max-width:760px;
  }

  /* photo gallery (content-extra > .photo-gallery): a simple grid for
     extra atmosphere photos. To add a photo, just add one more <img>
     line inside the .photo-gallery div in the HTML - no other changes
     needed, the grid reflows itself. */
  .photo-gallery{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:20px;
    margin-top:22px;
  }
  .photo-gallery img{
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    border-radius:4px;
    display:block;
    transition:transform .3s ease;
  }
  .photo-gallery img:hover{
    transform:scale(1.02);
  }
  @media (max-width:820px){
    .photo-gallery{grid-template-columns:repeat(2, 1fr); gap:14px;}
  }
  @media (max-width:520px){
    .photo-gallery{grid-template-columns:1fr;}
  }

  /* chip row (kernwaarden etc) */
  .chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
  }
  .chip{
    display:inline-block;
    padding:8px 18px;
    border-radius:999px;
    background:rgba(92,18,32,0.06);
    border:1px solid rgba(92,18,32,0.18);
    font-size:14px;
    letter-spacing:0.5px;
    color:var(--bordeaux);
  }

  /* team grid */
  .team-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:40px;
    margin-top:20px;
  }
  .team-grid .member{
    background:rgba(92,18,32,0.04);
    border-top:3px solid var(--blue-deep);
    padding:32px 28px;
  }
  .team-grid .member h3{
    font-size:20px;
    color:var(--bordeaux);
    margin-bottom:12px;
  }
  .team-grid .member p{
    font-size:16px;
    color:var(--bordeaux);
    opacity:0.85;
    margin:0;
  }
  @media (max-width:820px){
    .team-grid{grid-template-columns:1fr;}
  }

  /* CTA */
  .cta{
    background:var(--bordeaux);
    color:var(--cream);
    text-align:center;
    padding:90px 24px;
  }
  .cta h2{
    font-family:'Aujournuit Condensed', Georgia, serif;
    font-weight:normal;
    font-size:clamp(28px, 3.4vw, 38px);
    margin-bottom:28px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:15px 34px;
    border-radius:2px;
    text-decoration:none;
    font-family:'General Sans', -apple-system, sans-serif;
    font-weight:500;
    font-size:14px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    transition:background .25s ease, color .25s ease, border-color .25s ease;
  }
  .btn-primary{
    background:var(--blue);
    color:var(--bordeaux-deep);
    border:1px solid var(--blue);
  }
  .btn-primary:hover{background:transparent; color:var(--blue);}
  .btn-secondary{
    background:transparent;
    color:var(--cream);
    border:1px solid rgba(246,236,216,0.4);
    margin-left:14px;
  }
  .btn-secondary:hover{border-color:var(--cream); background:rgba(246,236,216,0.08);}

  footer{
    background:var(--cream);
    color:var(--bordeaux);
    text-align:center;
    padding:44px 0 48px;
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    border-top:1px solid rgba(92,18,32,0.12);
  }
  footer .logo-img{height:20px; margin:0 auto 14px;}
  footer .foot-nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px 18px;
    margin:16px 0 18px;
    letter-spacing:1px;
  }
  footer .foot-nav a{
    text-decoration:none;
    color:var(--bordeaux);
    opacity:0.75;
  }
  footer .foot-nav a:hover{opacity:1;}
  footer .copy{opacity:0.55; font-size:12px; letter-spacing:1px;}

  /* teamfoto's */
  .team-grid .member-photo{
    display:block;
    width:calc(100% + 56px);
    max-width:none;
    margin:-32px -28px 24px;
    aspect-ratio:4/5;
    object-fit:cover;
    object-position:center 30%;
  }

  /* wij aan het woord */
  .team-subhead{display:block; margin-top:40px;}
  .team-grid .member p.quote{font-style:italic;}
  .team-grid .member p.signature{
    margin-top:18px;
    font-weight:600;
    font-style:normal;
    letter-spacing:0.5px;
    opacity:1;
  }

  /* knoppen naast elkaar in de CTA: altijd wat ruimte, op gsm onder elkaar */
  .cta .btn{margin:6px 7px;}
  @media (max-width:600px){
    .cta .btn{
      display:flex;
      justify-content:center;
      width:100%;
      max-width:320px;
      margin:12px auto 0;
    }
  }

/* ---- Footer: wettelijke info + grotere tikzones op gsm ---- */
footer .foot-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 0 0 14px;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: none;
}
footer .foot-info a { text-decoration: none; }
footer .foot-info a:hover { text-decoration: underline; }
footer .copy { text-transform: none; line-height: 1.7; }
@media (max-width: 640px) {
  footer .foot-nav { gap: 2px 8px; padding: 0 16px; }
  footer .foot-nav a { padding: 10px 8px; }
  footer .foot-info { flex-direction: column; align-items: center; gap: 0; }
  footer .foot-info a, footer .foot-info span { padding: 8px 0; }
}

/* openingsuren + adres op de pagina koffie- & lunchbar */
.info-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.info-block p { margin: 0 0 10px; }
.info-block p.small { font-size: 15px; opacity: 0.75; }
@media (max-width: 640px) { .info-block { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 640px) { footer .copy { padding: 0 16px; } }