/*
Theme Name:   Twenty Twenty-One Child
Theme URI:    http://stefanpopa.nl/twentytwentyone-child/
Template:     twentytwentyone
Version:      1.0.0
Text Domain:  twentytwentyone-child
*/

:root{
  --global--font-primary: "Fraunces", Georgia, serif;
  --global--font-secondary: "Outfit", system-ui, sans-serif;
  --global--font-heading: "Fraunces", Georgia, serif;
}

body{
  font-family: var(--global--font-primary);
}

.nav, .menuPanel, .menuNav, .navLink, .brand, .meta p{
  font-family: var(--global--font-secondary);
}

  :root{
      --paper:#f4f3f1;
      --ink:#2b2b2b;
      --grid: rgba(43,43,43,.10);
      --grid2: rgba(43,43,43,.05);
      --btn:#4b3cf3;
      --btnHover:#3a2fe6;
      --cursor: rgba(43,43,43,.60);
    
      --ink-light:#555;
      --border: rgba(43,43,43,.08);
      --accent-teal: rgba(61,189,189,.14);
      --accent-gold: rgba(232,197,71,.14);
      --accent-pink: rgba(255,59,181,.11);
}
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%}
    
    /* hero shell: isolates all hero-only layers so the rest of the page is normal */
    #heroShell{
      position:relative;
      cursor:none;
      height:100svh;
      min-height:100vh;
      overflow:hidden;
    }
    #contentShell{
      position:relative;
      z-index:1;
    }
body{
      background: var(--paper);
      color: var(--ink);
      font-family:"Fraunces", Georgia, serif;
      overflow-x:hidden;
      overflow-y:auto;
      cursor:auto;
      touch-action:pan-y; /* allow scroll; paint still works */
    }

    .grid{      position:absolute; inset:0;
      background:
        linear-gradient(to right, var(--grid2) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(to bottom, var(--grid2) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(to right, var(--grid) 1px, transparent 1px) 0 0 / 120px 120px,
        linear-gradient(to bottom, var(--grid) 1px, transparent 1px) 0 0 / 120px 120px;
      pointer-events:none;
      opacity:.95;
      z-index:0;
    }
    .grain{      position:absolute; inset:-20%;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      opacity:.22;
      mix-blend-mode:multiply;
      pointer-events:none;
      z-index:0;
    }

.navLink {
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: normal;
}

.brand {
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: normal;
}


    .nav{
      position:fixed; inset:0 0 auto 0;
      padding: 26px 28px;
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      z-index:30;
      font-family:"Outfit",system-ui,sans-serif;
    }
    .brand{font-size:20px;font-weight:400;color:var(--ink);text-decoration:none;}
    .navRight{display:flex; align-items:center; gap:18px;}
    .navLink{font-size:18px;font-weight:400;color:var(--ink);text-decoration:none;}

.nav{
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease, transform .35s ease;
}
.nav.scrolled{
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.brandWrap{display:flex; align-items:center; gap:12px;}
.heroDivider{
  position: relative;
  height: 56px;
  margin-top: -1px;
  background: var(--paper);
  overflow: hidden;
}
.heroDivider svg{
  position:absolute; left:0; top:-6px;
  width: 110%;
  height: 72px;
  display:block;
  will-change: transform;
  animation: waveDrift 7s ease-in-out infinite;
}
@keyframes waveDrift{
  0%,100%{transform: translateX(0);}
  50%{transform: translateX(-42px);}
}
@media (prefers-reduced-motion: reduce){
  .heroDivider svg{animation:none;}
}
.heroDivider .waveFill{fill: var(--paper);}
.heroDivider .waveStroke{fill:none; stroke: rgba(0,0,0,.08); stroke-width: 1;}
.burger{
      width:44px;height:34px;
      border:0;background:transparent;
      cursor:auto;
      display:grid; place-items:center;
      padding:0;
    }
    .burgerSvg{display:block; overflow:visible;}
    .bLine{
      fill:none;
      stroke: rgba(43,43,43,.70);
      stroke-width:2.2;
      stroke-linecap:round;
      vector-effect: non-scaling-stroke;
      filter: drop-shadow(0 10px 26px rgba(0,0,0,.08));
      transition: stroke .15s ease, opacity .15s ease;
    }
    .burger:hover .bLine{stroke: rgba(43,43,43,.86);}

    .menuOverlay{
      pointer-events:auto;
      position:fixed; inset:0;
      display:none;
      z-index:95;
      padding: 20px;
      background:
        radial-gradient(900px 520px at 50% 18%, rgba(244,243,241,.86), rgba(244,243,241,.62) 60%, rgba(43,43,43,.22) 140%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .menuOverlay.show{display:flex; align-items:flex-start; justify-content:flex-end;}
    .menuPanel{
      width:min(520px, 92vw);
      margin-top: 78px;
      border-radius: 18px;
      border: 1px solid rgba(43,43,43,.12);
      background:
        radial-gradient(220px 160px at 18% 10%, rgba(61,189,189,.14), transparent 70%),
        radial-gradient(260px 180px at 62% 8%, rgba(232,197,71,.14), transparent 72%),
        radial-gradient(280px 200px at 84% 26%, rgba(255,59,181,.11), transparent 74%),
        linear-gradient(180deg, rgba(244,243,241,.96), rgba(244,243,241,.90));
      box-shadow: 0 48px 150px rgba(0,0,0,.20);
      overflow-x:hidden;
      overflow-y:auto;
      position:relative;
      isolation:isolate;
      transform: translateY(-6px);
      opacity:0;
      animation: menuIn .22s ease forwards;
    }
    @keyframes menuIn{ to{ transform: translateY(0); opacity:1; } }
    .menuPanel::before{
      content:"";
      position:absolute; inset:-20%;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      opacity:.22;
      mix-blend-mode:multiply;
      pointer-events:none;
      z-index:0;
    }
    .menuTop{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:14px;
      padding: 20px 20px 10px;
      font-family:"Outfit",system-ui,sans-serif;
      position:relative;
      z-index:2;
    }
    .menuKicker{
      font-size:10px;
      letter-spacing:.32em;
      text-transform:uppercase;
      color: rgba(43,43,43,.84);
      position:relative;
      padding: 2px 0;
    }
    .menuKicker::before{
      content:"";
      position:absolute;
      left:-10px; top:-8px;
      width: calc(100% + 20px);
      height: 40px;
      background:
        radial-gradient(80px 40px at 20% 60%, rgba(61,189,189,.20), transparent 70%),
        radial-gradient(96px 42px at 56% 40%, rgba(232,197,71,.20), transparent 72%),
        radial-gradient(92px 44px at 86% 70%, rgba(255,59,181,.16), transparent 72%);
      opacity:.92;
      mix-blend-mode:multiply;
      border-radius:999px;
      transform: rotate(-2deg);
      mask-image: radial-gradient(circle at 50% 50%, black 0 72%, transparent 92%);
      z-index:-1;
    }
    .menuClose{
      border: 1px solid rgba(43,43,43,.14);
      background: rgba(244,243,241,.62);
      color: rgba(43,43,43,.78);
      width:46px;height:46px;
      border-radius: 999px;
      cursor:auto;
      font-size:18px;
      display:grid;
      place-items:center;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      box-shadow: 0 18px 44px rgba(0,0,0,.12);
    }
    .menuClose:hover{transform: translateY(-1px); background: rgba(75,60,243,.08); border-color: rgba(75,60,243,.24);}
    .menuNav{
      padding: 10px 20px 18px;
      display:grid;
      gap: 10px;
      position:relative;
      z-index:2;
      font-family:"Fraunces", Georgia, serif;
    }
    .menuNav a{
      text-decoration:none;
      color: rgba(43,43,43,.88);
      font-size: 30px;
      letter-spacing:-.01em;
      line-height: 1.08;
      display:inline-block;
      padding: 6px 0;
      cursor:auto;
      transition: transform .12s ease;
    }
    .menuNav a:hover{ transform: translateX(2px); }
    .menuFoot{
      padding: 14px 20px 20px;
      border-top: 1px solid rgba(43,43,43,.10);
      position:relative;
      z-index:2;
      font-family:"Outfit",system-ui,sans-serif;
    }
    .menuNote{
      font-size: 12px;
      letter-spacing:.08em;
      color: rgba(43,43,43,.55);
    }

    
    /* canvases: visual layers only (do NOT block taps) */
    #spray{position:absolute; inset:0; z-index:2; pointer-events:none;}
    #marks{position:absolute; inset:0; z-index:5; pointer-events:none;}

    .wrap{position:relative;height:100%;display:grid;place-items:center;z-index:10;padding: clamp(64px, 8vh, 92px) 18px clamp(44px, 7vh, 84px);}
    .stage{position:relative;display:grid;place-items:center;gap:22px; transform: translateY(-12px);}

    .book{
      position:relative;
      width: min(380px, 66vw);
      z-index:12;
      filter: drop-shadow(0 28px 75px rgba(0,0,0,.28));
      animation: float 11s ease-in-out infinite;
      will-change: transform;
      user-select:none;
    }
    @keyframes float{
      0%,100%{transform: translateY(0)}
      50%{transform: translateY(-10px)}
    }
    .book img{width:100%; height:auto; display:block;}

    .waves{
      position:absolute;
      width: min(1200px, 96vw);
      height: 560px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -56%);
      pointer-events:none;
      z-index:9;
      mix-blend-mode:multiply;
      opacity:.93;
      filter: saturate(1.08) contrast(1.02);
    }
    .waves path{fill:none; stroke-linecap:round;}

    .meta{text-align:center; z-index:12;}
    .meta h1{font-size: clamp(34px, 4.2vw, 56px); font-weight:400; letter-spacing:-.01em;}
    .meta p{margin-top:8px;font-family:"Outfit",system-ui,sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(43,43,43,.55);}
    .cta{
      margin-top: 14px;
      display:inline-flex; align-items:center; justify-content:center;
      padding: 14px 22px;
      border-radius: 2px;
      border:0;
      background: var(--btn);
      color:#fff;
      text-decoration:none;
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 15px;
      font-weight:500;
      cursor:auto;
      transition: background .15s ease, transform .15s ease;
    }
    .cta:hover{background:var(--btnHover); transform: translateY(-1px);}


@media(max-height: 760px){
  .wrap{padding-top: 78px; padding-bottom: 72px;}
  .book{width: min(320px, 62vw);}
  .waves{height: 500px;}
}

    /* micro fragments */
    .micro{position:absolute; inset:0; z-index:20; pointer-events:none;}
    .micro button{
      pointer-events:auto;
      cursor:auto;
      position:absolute;
      font-family:"Outfit",system-ui,sans-serif;
      font-size:12px;
      letter-spacing:.08em;
      line-height:1.25;
      text-align:left;
      border:0;
      background:transparent;
      padding:0;
      color: rgba(43,43,43,.42);
      opacity:.74;
      mix-blend-mode:multiply;
      transition: transform .14s ease, opacity .14s ease, color .14s ease, filter .14s ease;
      max-width: 180px;
      user-select:none;
    }
    .micro button:hover,
    .micro button:focus-visible{
      opacity:1;
      color: rgba(43,43,43,.88);
      transform: scale(1.22);
      filter: saturate(1.06);
      text-shadow: 0 10px 28px rgba(0,0,0,.12);
      outline:none;
    }
    .micro button.lit{
      opacity:1 !important;
      color: rgba(43,43,43,.88) !important;
      transform: scale(1.18) !important;
      text-shadow: 0 10px 28px rgba(0,0,0,.12);
    }

    /* modal */
    .modal{
      position:fixed; inset:0;
      display:none; place-items:center;
      z-index:80;
      /* less clinical: vignette + soft ink */
      background:
        radial-gradient(900px 520px at 50% 18%, rgba(244,243,241,.86), rgba(244,243,241,.64) 60%, rgba(43,43,43,.22) 140%);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 26px;
      cursor:auto;
    }
    .modal.show{display:grid}
    .card{
      width:min(860px, 94vw);
      max-height: 82vh;
      border-radius: 18px;
      border: 1px solid rgba(43,43,43,.12);
      /* paper with pigment underneath */
      background:
        radial-gradient(220px 160px at 18% 18%, rgba(61,189,189,.16), transparent 70%),
        radial-gradient(260px 180px at 58% 10%, rgba(232,197,71,.16), transparent 72%),
        radial-gradient(280px 200px at 82% 26%, rgba(255,59,181,.12), transparent 74%),
        linear-gradient(180deg, rgba(244,243,241,.96), rgba(244,243,241,.90));
      box-shadow: 0 48px 150px rgba(0,0,0,.22);
      overflow-x:hidden;
      overflow-y:auto;
      display:flex;
      flex-direction:column;
      position:relative;
      isolation:isolate;
    }
    .card::before{
      content:"";
      position:absolute; inset:-20%;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
      opacity:.22;
      mix-blend-mode:multiply;
      pointer-events:none;
      z-index:0;
    }
    .card::after{
      content:"";
      position:absolute; inset:0;
      /* faint tide line near bottom */
      background: radial-gradient(700px 160px at 50% 112%, rgba(75,60,243,.10), transparent 70%);
      opacity:.9;
      pointer-events:none;
      z-index:0;
      mix-blend-mode:multiply;
    }
    .cardHead{
      padding: 22px 22px 10px;
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:14px;
      font-family:"Outfit",system-ui,sans-serif;
      position:relative;
      flex: 0 0 auto;
      z-index:2;
    }
    .titleWrap{position:relative; padding-right:8px;}
    .titleWrap::before{
      content:"";
      position:absolute;
      left:-14px; top:-10px;
      width: calc(100% + 26px);
      height: 54px;
      /* organic wash behind the title */
      background:
        radial-gradient(90px 46px at 18% 60%, rgba(61,189,189,.22), transparent 70%),
        radial-gradient(110px 52px at 55% 40%, rgba(232,197,71,.22), transparent 72%),
        radial-gradient(110px 56px at 86% 70%, rgba(255,59,181,.18), transparent 72%);
      opacity:.95;
      mix-blend-mode:multiply;
      filter: blur(.2px);
      border-radius: 999px;
      transform: rotate(-2deg);
      mask-image: radial-gradient(circle at 50% 50%, black 0 72%, transparent 92%);
      z-index:-1;
    }
    .cardTitle{
      font-size:10px;
      letter-spacing:.32em;
      text-transform:uppercase;
      color: rgba(43,43,43,.86);
    }
    .cardSub{
      margin-top:7px;
      font-size:14px;
      letter-spacing:.06em;
      color: rgba(43,43,43,.62);
    }
    .divider{
      height:1px;
      width:100%;
      background: linear-gradient(90deg, transparent 0%, rgba(43,43,43,.18) 12%, rgba(43,43,43,.18) 88%, transparent 100%);
      opacity:.55;
    }
    .close{
      border: 1px solid rgba(43,43,43,.14);
      background: rgba(244,243,241,.62);
      color: rgba(43,43,43,.78);
      width:46px;height:46px;
      border-radius: 999px;
      cursor:auto;
      font-size:18px;
      display:grid;
      place-items:center;
      transition: transform .12s ease, background .12s ease, border-color .12s ease;
      box-shadow: 0 18px 44px rgba(0,0,0,.12);
      z-index:3;
    }
    .close:hover{transform: translateY(-1px); background: rgba(75,60,243,.08); border-color: rgba(75,60,243,.24);}
    .cardBody{
      padding: 18px 22px 10px;
      overflow:auto;
      -webkit-overflow-scrolling: touch;
      position:relative;
      z-index:2;
      flex: 1 1 auto;
      min-height: 0;
    }
    .cardBody::before{
      content:"";
      position:sticky;
      top:0;
      display:block;
      height:22px;
      margin-top:-18px;
      background:
        radial-gradient(60% 18px at 50% 0%, rgba(61,189,189,.18), transparent 70%),
        radial-gradient(60% 18px at 30% 0%, rgba(232,197,71,.18), transparent 72%),
        radial-gradient(60% 18px at 70% 0%, rgba(255,59,181,.14), transparent 72%),
        linear-gradient(to bottom, rgba(244,243,241,.92), rgba(244,243,241,0));
      pointer-events:none;
      z-index:3;
    }
    .cardBody p{
      font-size: 21px;
      line-height: 1.82;
      color: rgba(43,43,43,.90);
      margin-bottom: 14px;
    }
    .cardBody p:first-child::first-letter{
      float:left;
      font-family:"Fraunces", Georgia, serif;
      font-weight:500;
      font-size: 52px;
      line-height: .92;
      padding: 8px 12px 0 0;
      color: rgba(43,43,43,.92);
      text-shadow: 0 18px 44px rgba(0,0,0,.10);
    }
    .cardFoot{
      padding: 14px 22px 22px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:14px;
      flex-wrap:wrap;
      font-family:"Outfit",system-ui,sans-serif;
      position:relative;
      flex: 0 0 auto;
      z-index:2;
    }
    .sourceLine{
      font-size:11px;
      letter-spacing:.18em;
      text-transform:uppercase;
      color: rgba(43,43,43,.62);
      display:flex;
      align-items:center;
      gap:10px;
    }
    .sourceLine .dot{
      width:10px; height:10px; border-radius:999px;
      background: var(--dotColor, rgba(232,197,71,.76));
      box-shadow: 0 0 0 6px rgba(232,197,71,.14);
      mix-blend-mode:multiply;
    }
    .actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
    .actions a{
      cursor:auto;
      text-decoration:none;
      border-radius: 999px;
      font-size: 14px;
      font-weight:500;
      padding: 12px 18px;
    }
    .actions .primary{
      background: var(--btn);
      color:#fff;
      box-shadow: 0 24px 58px rgba(75,60,243,.22);
    }
    .actions .primary:hover{background: var(--btnHover)}
    .actions .ghost{
      color: rgba(43,43,43,.80);
      border: 1px solid rgba(43,43,43,.14);
      background: rgba(244,243,241,.58);
    }
    .actions .ghost:hover{border-color: rgba(75,60,243,.24); background: rgba(75,60,243,.06)}

    /* cursor */
    .cursor{
      position:absolute;
      width:34px;height:34px;
      border:1px solid var(--cursor);
      border-radius:999px;
      transform: translate(-50%,-50%);
      pointer-events:none;
      z-index:120;
      mix-blend-mode:multiply;
    }
    .cursor::after{
      content:"";
      position:absolute; left:50%; top:50%;
      width:4px;height:4px;
      background: rgba(43,43,43,.6);
      border-radius:50%;
      transform: translate(-50%,-50%);
    }
    .cursorLabel{
      position:absolute;
      top: 42px;
      left: 50%;
      transform: translateX(-50%);
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 11px;
      letter-spacing:.08em;
      color: rgba(43,43,43,.55);
      background: rgba(244,243,241,.9);
      border: 1px solid rgba(43,43,43,.12);
      padding: 6px 8px;
      border-radius: 999px;
      white-space:nowrap;
      opacity:0;
      transition: opacity .12s ease;
    }
    .cursor.is-link .cursorLabel{opacity:1}

    @media (max-width: 720px){
      .navLink{display:none}
      .waves{height: 500px; transform: translate(-50%, -58%);}
      .book{width: min(340px, 74vw);}
      .micro button{max-width: 150px;}

      .micro button[data-frag="5"]{ left: 72% !important; top: 82% !important; }
      .micro button[data-frag="6"]{ left: 8% !important;  top: 84% !important; }
    }
    @media (hover: none){
      .cursor{display:none}
      body{cursor:auto}
    }

/* ===== Imported content styles (from full site) ===== */
/* Content sections */
    .content{
      position:relative;
      z-index:10;
    }
    .section{
      max-width: 1200px;
      margin: 0 auto;
      padding: 50px 24px;
    }
    @media(max-width:768px){
      .section{
        padding: 70px 20px;
      }
    }
    @media(max-width:480px){
      .section{
        padding: 60px 18px;
      }
    }
    .section.tight{
      max-width: 800px;
    }
    .section.wide{
      max-width: 1400px;
    }

    /* Typography */
    .kicker{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 12px;
      letter-spacing:.30em;
      text-transform:uppercase;
      color: var(--btn);
      margin-bottom: 20px;
      font-weight: 600;
    }
    .sectionTitle{
      font-size: clamp(40px, 6vw, 64px);
      line-height: 1.1;
      letter-spacing:-.02em;
      margin-bottom: 28px;
      font-weight: 500;
    }
    .lead{
      font-size: clamp(20px, 3vw, 26px);
      line-height: 1.5;
      color: var(--ink-light);
      margin-bottom: 0px;
      max-width: 800px;
    }
    .prose{
      font-size: 17px;
      line-height: 1.7;
      color: var(--ink);
    }
    .prose p{
      margin-bottom: 1.2em;
    }
    .prose p:last-child{
      margin-bottom: 0;
    }
    @media(max-width:600px){
      .prose{
        font-size: 16px;
        line-height: 1.65;
      }
    }

    /* Buttons */
    .btn{
      display:inline-block;
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 16px;
      font-weight: 500;
      padding: 14px 32px;
      background: var(--btn);
      color: white;
      text-decoration:none;
      border-radius: 8px;
      transition: all .2s ease;
      border:0;
      cursor:pointer;
      box-shadow: 0 4px 14px rgba(75,60,243,.24);
    }
    .btn:hover{
      background: var(--btnHover);
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(75,60,243,.32);
    }
    .btn.secondary{
      background: transparent;
      color: var(--ink);
      border: 1.5px solid var(--border);
      box-shadow: none;
    }
    .btn.secondary:hover{
      border-color: var(--btn);
      color: var(--btn);
      box-shadow: none;
    }

    /* Book section */
    .bookSection{
      display:grid;
      gap: 60px;
      align-items:start;
    }
    @media(min-width:900px){
      .bookSection{
        grid-template-columns: 1fr 1.4fr;
        gap: 80px;
      }
    }
    @media(max-width:600px){
      .bookSection{
        gap: 40px;
      }
    }
    .bookCover{
      width: 100%;
      max-width: 520px;
      margin: 0 auto;
      filter: drop-shadow(0 20px 60px rgba(0,0,0,.22));
    }
    
    @media (min-width: 1100px){
      .bookCover{ max-width: 640px; }
    }
.bookCover img{
      width:100%;
      height:auto;
      display:block;
    }
    @media (min-width: 900px){
      /* Make the cover column stick while reading this section, but only within the section */
      .bookCoverCol{
        align-self:start;
        position: sticky;
        top: 110px; /* below fixed nav */
      }
      .bookCover{position: relative; top: 0;}
    }
    .bookMeta{
      display:flex;
      flex-direction:column;
      gap: 12px;
    }
    @media(max-width:600px){
      .bookMeta{
        gap: 24px;
      }
    }
    .ctaGroup{
      display:flex;
      gap: 12px;
      flex-wrap:wrap;
    }
    @media(max-width:600px){
      .ctaGroup{
        flex-direction:column;
        gap: 10px;
      }
      .ctaGroup .btn{
        width:100%;
        text-align:center;
      }
    }

    /* Newsletter - with atmospheric background image */
    .newsletterWrap{
      position:relative;
      margin: 10px 0;
    }
    @media(max-width:768px){
      .newsletterWrap{
        margin: 80px 0;
      }
    }
    .newsletterBg{
      position:relative;
      min-height: 600px;
      background-image: url('https://stefanpopa.nl/wp-content/uploads/2026/02/Video_Kwaliteit_Voldoet_Niet.gif');
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      display:grid;
      place-items:center;
      padding: 80px 24px;
    }
    @media(max-width:768px){
      .newsletterBg{
        min-height: auto;
        padding: 60px 20px;
      }
    }
    .newsletterBg::before{
      content:"";
      position:absolute;
      inset:0;
      background: linear-gradient(135deg, rgba(43,43,43,.75), rgba(43,43,43,.60));
      backdrop-filter: blur(1px);
    }
    .newsletter{
      position:relative;
      max-width: 800px;
      z-index:2;
    }
    .newsletterInner{
      position:relative;
      display:grid;
      gap: 40px;
      padding: 64px 56px;
      background: rgba(255,255,255,.98);
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 20px;
      box-shadow: 0 40px 120px rgba(0,0,0,.4);
    }
    
    .newsletterKicker{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 11px;
      letter-spacing:.32em;
      text-transform:uppercase;
      color: var(--btn);
      font-weight: 600;
      margin-bottom: 12px;
      display:inline-block;
      position:relative;
    }
    .newsletterKicker::after{
      content:"";
      position:absolute;
      left:-8px;
      right:-8px;
      top:50%;
      height: 20px;
      background: rgba(75,60,243,.08);
      transform: translateY(-50%) rotate(-1deg);
      border-radius: 4px;
      z-index:-1;
    }
    .newsletterTitle{
      font-size: clamp(32px, 5vw, 52px);
      margin-bottom: 16px;
      font-weight: 500;
      line-height: 1.15;
      letter-spacing:-.02em;
    }
    .newsletterDesc{
      font-size: 18px;
      color: var(--ink-light);
      line-height: 1.6;
      margin-bottom: 32px;
    }
    .newsletterForm{
      display:flex;
      gap: 12px;
      flex-wrap:wrap;
    }
    .newsletterForm input{
      flex:1;
      min-width: 280px;
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 16px;
      padding: 18px 24px;
      border: 2px solid rgba(43,43,43,.12);
      border-radius: 12px;
      background: white;
      color: var(--ink);
      transition: all .2s ease;
    }
    .newsletterForm input:focus{
      outline:none;
      border-color: var(--btn);
      box-shadow: 0 0 0 4px rgba(75,60,243,.08);
    }
    .newsletterForm .btn{
      padding: 18px 40px;
      font-size: 16px;
      white-space:nowrap;
    }
    .newsletterBenefits{
      display:flex;
      gap: 32px;
      flex-wrap:wrap;
      margin-top: 28px;
      padding-top: 28px;
      border-top: 1px solid rgba(43,43,43,.08);
    }
    .newsletterBenefit{
      display:flex;
      align-items:flex-start;
      gap: 10px;
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 14px;
      color: var(--ink-light);
    }
    .newsletterBenefit::before{
      content:"✓";
      display:block;
      width: 22px;
      height: 22px;
      background: var(--btn);
      color: white;
      border-radius: 50%;
      font-size: 12px;
      font-weight: bold;
      display:grid;
      place-items:center;
      flex-shrink:0;
    }

    @media(max-width:768px){
      .newsletterBg{
        background-attachment: scroll;
      }
      .newsletterInner{
        padding: 48px 32px;
      }
    }

    /* Posts grid - premium featured layout */
    .postsGrid{
      display:grid;
      gap: 60px;
    }
    
    /* Featured post - magazine split layout */
    .postFeatured{
      position:relative;
      display:grid;
      gap: 0;
      padding: 0;
      background: white;
      border: 1px solid rgba(43,43,43,.08);
      border-radius: 20px;
      text-decoration:none;
      color: var(--ink);
      overflow:hidden;
      transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
      box-shadow: 0 4px 24px rgba(0,0,0,.04);
      min-height: 500px;
    }
    .postFeatured:hover{
      transform: translateY(-8px);
      box-shadow: 0 32px 80px rgba(0,0,0,.12);
      border-color: rgba(75,60,243,.2);
    }
    
    @media(min-width:900px){
      .postFeatured{
        grid-template-columns: 1fr 1fr;
        min-height: 600px;
      }
    }
    
    .postFeaturedVisual{
      position:relative;
      height: 300px;
      background: 
        linear-gradient(135deg, rgba(75,60,243,.12) 0%, rgba(232,197,71,.08) 100%);
      display:grid;
      place-items:center;
      overflow:hidden;
    }
    .postFeaturedVisual::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 30% 40%, rgba(75,60,243,.15), transparent 60%),
        radial-gradient(circle at 70% 60%, rgba(232,197,71,.12), transparent 60%);
    }
    .postFeaturedVisual img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .postFeaturedLabel{
      position:absolute;
      top: 32px;
      left: 32px;
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 11px;
      letter-spacing:.28em;
      text-transform:uppercase;
      background: white;
      color: var(--btn);
      padding: 8px 16px;
      border-radius: 6px;
      font-weight: 600;
      box-shadow: 0 4px 16px rgba(0,0,0,.1);
      z-index:10;
    }
    
    @media(min-width:900px){
      .postFeaturedVisual{
        height: 100%;
      }
      .postFeaturedLabel{
        top: 40px;
        left: 40px;
      }
    }
    @media(max-width:768px){
      .postFeaturedVisual{
        height: 280px;
      }
    }
    @media(max-width:480px){
      .postFeaturedVisual{
        height: 240px;
      }
      .postFeaturedLabel{
        top: 24px;
        left: 24px;
        font-size: 10px;
        padding: 6px 12px;
      }
    }
    
    .postFeaturedContent{
      padding: 56px;
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap: 24px;
    }
    @media(max-width:768px){
      .postFeaturedContent{
        padding: 36px;
        gap: 20px;
      }
    }
    @media(max-width:480px){
      .postFeaturedContent{
        padding: 28px 24px;
        gap: 16px;
      }
    }
    
    .postFeatured .postMeta{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 13px;
      color: var(--ink-light);
      text-transform:uppercase;
      letter-spacing:.20em;
      font-weight: 500;
    }
    .postFeatured .postTitle{
      font-size: clamp(32px, 4vw, 48px);
      line-height: 1.15;
      letter-spacing:-.02em;
      font-weight: 500;
      transition: color .3s ease;
      margin-bottom: 4px;
    }
    .postFeatured:hover .postTitle{
      color: var(--btn);
    }
    .postFeatured .postExcerpt{
      font-size: 18px;
      line-height: 1.6;
      color: var(--ink-light);
    }
    @media(max-width:600px){
      .postFeatured .postExcerpt{
        font-size: 16px;
      }
    }
    .postFeatured .postRead{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 14px;
      font-weight: 600;
      color: var(--btn);
      text-transform:uppercase;
      letter-spacing:.18em;
      display:inline-flex;
      align-items:center;
      gap: 10px;
      margin-top: 8px;
    }
    .postFeatured .postRead::after{
      content:"→";
      font-size: 18px;
      transition: transform .3s ease;
    }
    .postFeatured:hover .postRead::after{
      transform: translateX(6px);
    }

    /* Secondary posts - elegant minimal cards */
    .postsSecondary{
      display:grid;
      gap: 40px;
    }
    @media(min-width:700px){
      .postsSecondary{
        grid-template-columns: repeat(2, 1fr);
        gap: 48px;
      }
    }
    .postCard{
      position:relative;
      display:flex;
      flex-direction:column;
      gap: 16px;
      text-decoration:none;
      color: var(--ink);
      padding: 0;
      transition: all .3s ease;
      group:hover;
    }
    .postCard:hover{
      transform: translateY(-4px);
    }
    .postCardNumber{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 13px;
      font-weight: 700;
      color: rgba(43,43,43,.2);
      letter-spacing:.08em;
      margin-bottom: 8px;
    }
    .postCard .postMeta{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 12px;
      color: var(--ink-light);
      text-transform:uppercase;
      letter-spacing:.14em;
    }
    .postCard .postTitle{
      font-size: 26px;
      line-height: 1.3;
      font-weight: 500;
      transition: color .2s ease;
      margin-bottom: 8px;
    }
    .postCard:hover .postTitle{
      color: var(--btn);
    }
    .postCard .postExcerpt{
      font-size: 16px;
      line-height: 1.6;
      color: var(--ink-light);
    }
    .postCard::after{
      content:"";
      position:absolute;
      bottom:-20px;
      left:0;
      width: 40px;
      height: 2px;
      background: var(--btn);
      opacity: 0;
      transition: all .3s ease;
    }
    .postCard:hover::after{
      opacity: 1;
      width: 60px;
    }

    /* Reviews */
    .reviewsGrid{
      display:grid;
      gap: 32px;
    }
    @media(min-width:800px){
      .reviewsGrid{
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
      }
    }
    .review{
      border-left: 3px solid var(--btn);
      padding-left: 24px;
    }
    .reviewQuote{
      font-size: 20px;
      line-height: 1.5;
      font-style: italic;
      margin-bottom: 16px;
      color: var(--ink);
    }
    .reviewSource{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 14px;
      color: var(--ink-light);
      font-weight: 500;
    }

    /* About */
    .aboutGrid{
      display:grid;
      gap: 60px;
      align-items:start;
    }
    @media(min-width:800px){
      .aboutGrid{
        grid-template-columns: 320px 1fr;
        gap: 80px;
      }
    }
    .aboutPhoto{
      width: 100%;
      max-width: 320px;
      margin: 0 auto;
      aspect-ratio: 3/4;
      background: var(--grid);
      border-radius: 8px;
      overflow:hidden;
    }
    .aboutPhoto img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    /* Bibliography - book slider */
    .bookSlider{
      position:relative;
      overflow:hidden;
      margin-top: 48px;
    }
    .bookSliderTrack{
      display:flex;
      gap: 32px;
      transition: transform .5s ease;
      padding: 8px;
    }
    .bookCard{
      flex: 0 0 calc(25% - 24px);
      min-width: 240px;
      display:flex;
      flex-direction:column;
      gap: 20px;
      text-decoration:none;
      color: var(--ink);
    }
    @media(max-width:1200px){
      .bookCard{
        flex: 0 0 calc(33.333% - 22px);
      }
    }
    @media(max-width:900px){
      .bookCard{
        flex: 0 0 calc(50% - 16px);
      }
    }
    @media(max-width:600px){
      .bookCard{
        flex: 0 0 calc(100% - 16px);
        min-width: 280px;
      }
    }
    .bookCoverWrapper{
      position:relative;
      aspect-ratio: 2/3;
      border-radius: 8px;
      overflow:hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,.12);
      transition: all .3s ease;
      background: #e5e5e5;
    }
    .bookCard:hover .bookCoverWrapper{
      transform: translateY(-8px);
      box-shadow: 0 16px 48px rgba(0,0,0,.20);
    }
    .bookCoverWrapper img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .bookCardTitle{
      font-size: 20px;
      font-weight: 500;
      line-height: 1.3;
      margin-bottom: 8px;
    }
    .bookCardMeta{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 13px;
      color: var(--ink-light);
      margin-bottom: 12px;
    }
    .bookCardExcerpt{
      font-size: 15px;
      line-height: 1.5;
      color: var(--ink-light);
    }
    
    .sliderControls{
      display:flex;
      gap: 12px;
      margin-top: 40px;
      justify-content:center;
    }
    .sliderBtn{
      width: 48px;
      height: 48px;
      border: 1.5px solid rgba(43,43,43,.12);
      background: white;
      border-radius: 50%;
      display:grid;
      place-items:center;
      cursor:pointer;
      transition: all .2s ease;
      font-size: 20px;
      color: var(--ink);
    }
    .sliderBtn:hover{
      border-color: var(--btn);
      background: var(--btn);
      color: white;
      transform: scale(1.05);
    }
    .sliderBtn:disabled{
      opacity: .3;
      cursor: not-allowed;
      transform: scale(1);
    }
    .sliderBtn:disabled:hover{
      border-color: rgba(43,43,43,.12);
      background: white;
      color: var(--ink);
    }
    .sliderDots{
      display:flex;
      gap: 8px;
      align-items:center;
    }
    .sliderDot{
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(43,43,43,.2);
      transition: all .2s ease;
    }
    .sliderDot.active{
      background: var(--btn);
      width: 24px;
      border-radius: 4px;
    }

    /* Footer - CTA-heavy premium design */
    .footer{
      background: linear-gradient(135deg, #2b2b2b 0%, #1a1a1a 100%);
      color: rgba(255,255,255,.9);
      padding: 0;
      margin-top: 140px;
      position:relative;
      overflow:hidden;
    }
    .footer::before{
      content:"";
      position:absolute;
      top:0;
      left:0;
      right:0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    }
    .footerHero{
      padding: 80px 24px;
      text-align:center;
      border-bottom: 1px solid rgba(255,255,255,.08);
      position:relative;
    }
    @media(max-width:768px){
      .footerHero{
        padding: 60px 20px;
      }
    }
    @media(max-width:480px){
      .footerHero{
        padding: 50px 18px;
      }
    }
    .footerHeroTitle{
      font-size: clamp(32px, 5vw, 56px);
      line-height: 1.15;
      margin-bottom: 24px;
      font-weight: 500;
      letter-spacing:-.02em;
    }
    .footerHeroDesc{
      font-size: 20px;
      color: rgba(255,255,255,.7);
      margin-bottom: 40px;
      max-width: 600px;
      margin-left:auto;
      margin-right:auto;
      line-height: 1.5;
    }
    .footerCTAs{
      display:flex;
      gap: 16px;
      justify-content:center;
      flex-wrap:wrap;
    }
    .footerCTAs .btn{
      background: white;
      color: #2b2b2b;
      font-size: 17px;
      padding: 16px 40px;
    }
    @media(max-width:600px){
      .footerCTAs{
        flex-direction:column;
        gap: 12px;
      }
      .footerCTAs .btn{
        width:100%;
      }
    }
    .footerCTAs .btn:hover{
      background: #f0f0f0;
      transform: translateY(-3px);
    }
    .footerCTAs .btn.secondary{
      background: transparent;
      color: white;
      border-color: rgba(255,255,255,.3);
    }
    .footerCTAs .btn.secondary:hover{
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.5);
      color: white;
    }
    
    .footerMain{
      padding: 60px 24px;
      max-width: 1200px;
      margin: 0 auto;
      display:grid;
      gap: 60px;
    }
    @media(min-width:900px){
      .footerMain{
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 80px;
      }
    }
    @media(max-width:768px){
      .footerMain{
        padding: 50px 20px;
        gap: 48px;
      }
    }
    @media(max-width:480px){
      .footerMain{
        padding: 40px 18px;
        gap: 40px;
      }
    }
    .footerCol h4{
      font-size: 14px;
      font-family:"Outfit",system-ui,sans-serif;
      text-transform:uppercase;
      letter-spacing:.24em;
      margin-bottom: 24px;
      color: rgba(255,255,255,.5);
      font-weight: 600;
    }
    .footerAbout{
      max-width: 400px;
    }
    .footerBrandLarge{
      font-size: 28px;
      margin-bottom: 16px;
      font-weight: 500;
      color: white;
    }
    .footerAboutText{
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255,255,255,.7);
      margin-bottom: 28px;
    }
    .footerSocial{
      display:flex;
      gap: 16px;
    }
    .footerSocialLink{
      width: 40px;
      height: 40px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 50%;
      display:grid;
      place-items:center;
      color: rgba(255,255,255,.7);
      text-decoration:none;
      transition: all .2s ease;
      font-size: 18px;
    }
    .footerSocialLink:hover{
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.5);
      color: white;
      transform: translateY(-2px);
    }
    .footerLinks{
      display:flex;
      flex-direction:column;
      gap: 12px;
    }
    .footerLink{
      color: rgba(255,255,255,.7);
      text-decoration:none;
      font-size: 16px;
      transition: color .2s ease;
      display:inline-block;
    }
    .footerLink:hover{
      color: white;
    }
    .footerNewsletter{
    }
    .footerNewsletterDesc{
      font-size: 15px;
      line-height: 1.5;
      color: rgba(255,255,255,.7);
      margin-bottom: 20px;
    }
    .footerNewsletterForm{
      display:flex;
      gap: 8px;
      flex-direction:column;
    }
    .footerNewsletterForm input{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 15px;
      padding: 14px 18px;
      border: 1px solid rgba(255,255,255,.2);
      border-radius: 8px;
      background: rgba(255,255,255,.05);
      color: white;
      transition: all .2s ease;
    }
    .footerNewsletterForm input::placeholder{
      color: rgba(255,255,255,.4);
    }
    .footerNewsletterForm input:focus{
      outline:none;
      border-color: rgba(255,255,255,.5);
      background: rgba(255,255,255,.08);
    }
    .footerNewsletterForm .btn{
      width:100%;
      background: white;
      color: #2b2b2b;
      justify-content:center;
    }
    .footerNewsletterForm .btn:hover{
      background: #f0f0f0;
    }
    
    .footerBottom{
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 32px 24px;
      text-align:center;
    }
    .footerCopyright{
      font-family:"Outfit",system-ui,sans-serif;
      font-size: 13px;
      color: rgba(255,255,255,.4);
    }

  
    /* ===== Polish tweaks (v11) ===== */
    @media (min-width: 900px){
      /* Less vertical air above Essays & reflecties */
      #schrijven.section{ padding-top: 70px; }
      /* Tighter gap before footer */
      #bibliografie.section{ padding-bottom: 70px; }
    }
    .footer{ margin-top: 80px; }

/* ==== Fix: TT1 button styles lekken je hero in ==== */
#heroShell .micro button,
#heroShell .burger,
#heroShell .menuClose {
  -webkit-appearance: none !important;
  appearance: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

#heroShell .micro button{
  background-color: transparent !important; /* extra hard */
color: rgba(43, 43, 43, .42);
}

/* Als TT1 een focus-achtergrond/outline zet */
#heroShell .micro button:focus,
#heroShell .micro button:active{
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
#heroShell .micro button:focus-visible{
  outline: 2px solid rgba(75,60,243,.35);
  outline-offset: 6px;
	color: rgba(43, 43, 43, .88) !important;
}

/* ===== Fix: TT1 button styling leaking into hero ===== */
#heroShell button{
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none !important;
}

/* micro-fragmenten: expliciet transparant houden */
#heroShell .micro button{
  background: transparent !important;
  box-shadow: none !important;
}

/* burger/menu knoppen: ook resetten + cursor */
#heroShell .burger,
#heroShell .menuClose,
#heroShell .close{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* en daarna jouw bedoelde look forceren (close knoppen) */
#heroShell .menuClose,
#heroShell .close{
  border: 1px solid rgba(43,43,43,.14) !important;
  background: rgba(244,243,241,.62) !important;
  color: rgba(43,43,43,.78) !important;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

/* === HERO: reset parent-theme button/link styling (fix zwarte/grijze blokken) === */
#heroShell button,
#heroShell input,
#heroShell a.btn,
#heroShell .btn,
#heroShell .cta,
#heroShell .sliderBtn,
.menuOverlay button,
.modal button {
  -webkit-appearance: none;
  appearance: none;
  border: 0 !important;
  text-shadow: none !important;
  padding: 0;              /* belangrijk: haalt theme-padding weg */
  margin: 0;
  border-radius: 0;        /* haalt theme-rounding weg */
  font: inherit;
  color: inherit;
}

/* Micro-fragmenten: echt “tekst only” */
#heroShell .micro button{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  color: rgba(43,43,43,.42) !important; /* jouw originele look */
}

/* Links in je hero niet ineens “button-styled” */
#heroShell a{

}

/* Slider knoppen: jouw eigen styling terug (cirkel + border) */
#heroShell .sliderBtn{
  width: 48px;
  height: 48px;
  border: 1.5px solid rgba(43,43,43,.12) !important;
  background: #fff !important;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Sluitknoppen (menu + modal): fix “gek” kruisje/kleur */
#heroShell .menuClose,
#heroShell .close,
.menuOverlay .menuClose,
.modal .close{
  background: rgba(244,243,241,.62) !important;
  border: 1px solid rgba(43,43,43,.14) !important;
  border-radius: 999px !important;
  width: 46px;
  height: 46px;
  padding: 0 !important;
  color: rgba(43,43,43,.78) !important; /* dus niet die .42 */
  box-shadow: 0 18px 44px rgba(0,0,0,.12) !important;
  line-height: 1;
}

/* Als je “golfjes” (svg) ergens een achtergrond krijgen door theme-styles */
#heroShell svg{
  background: transparent !important;
}

/* ================================
   FIX: theme overrides op forms/buttons
   (newsletter + footer + slider)
================================ */

/* 1) Slider controls */
.sliderControls .sliderBtn{
  -webkit-appearance: none;
  appearance: none;

  width: 48px;
  height: 48px;
  border-radius: 999px;

  border: 1.5px solid rgba(43,43,43,.12) !important;
  background: #fff !important;
  box-shadow: none !important;

  display: grid !important;
  place-items: center !important;

  padding: 0 !important;
  margin: 0 !important;

  font-family: "Outfit", system-ui, sans-serif !important;
  font-size: 20px !important;
  line-height: 1 !important;

  color: var(--ink) !important;
  cursor: pointer !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

.sliderControls .sliderBtn:hover{
  border-color: var(--btn) !important;
  background: var(--btn) !important;
  color: #fff !important;
}

.sliderControls .sliderBtn:disabled{
  opacity: .35 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

.sliderControls .sliderBtn:disabled:hover{
  border-color: rgba(43,43,43,.12) !important;
  background: #fff !important;
  color: var(--ink) !important;
}

/* Dots blijven neutraal */
.sliderControls .sliderDot{
  background: rgba(43,43,43,.2) !important;
}
.sliderControls .sliderDot.active{
  background: var(--btn) !important;
}


/* 2) Newsletter form (licht) */
.newsletterForm input[type="email"],
.footerNewsletterForm input[type="email"]{
  -webkit-appearance: none;
  appearance: none;

  font-family:"Outfit",system-ui,sans-serif !important;
  font-size: 16px !important;
  line-height: 1.2 !important;

  padding: 18px 24px !important;
  border-radius: 12px !important;

  border: 2px solid rgba(43,43,43,.12) !important;
  background: #fff !important;

  color: var(--ink) !important;
  box-shadow: none !important;
  outline: none !important;

  width: 100%;
  max-width: none;
}

.newsletterForm input[type="email"]::placeholder,
.footerNewsletterForm input[type="email"]::placeholder{
  color: rgba(43,43,43,.45) !important;
}

.newsletterForm input[type="email"]:focus,
.footerNewsletterForm input[type="email"]:focus{
  border-color: var(--btn) !important;
  box-shadow: 0 0 0 4px rgba(75,60,243,.10) !important;
}


/* 3) Buttons (jouw .btn) — maar alleen binnen jouw forms */
.newsletterForm .btn,
.footerNewsletterForm .btn{
  -webkit-appearance: none;
  appearance: none;

  font-family:"Outfit",system-ui,sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;

  padding: 18px 40px !important;
  border-radius: 12px !important;

  background: var(--btn) !important;
  color: #fff !important;

  border: 0 !important;
  box-shadow: 0 10px 30px rgba(75,60,243,.22) !important;

  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;

  cursor: pointer !important;
}

.newsletterForm .btn:hover,
.footerNewsletterForm .btn:hover{
  background: var(--btnHover) !important;
  transform: translateY(-1px);
}

/* Footer variant (donkere footer) — jouw footer gebruikt vaak andere padding/border */
.footerNewsletterForm input[type="email"]{
  border: 1px solid rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(255,255,255,.92) !important;
}

.footerNewsletterForm input[type="email"]::placeholder{
  color: rgba(255,255,255,.45) !important;
}

.footerNewsletterForm input[type="email"]:focus{
  border-color: rgba(255,255,255,.45) !important;
  box-shadow: 0 0 0 4px rgba(255,255,255,.08) !important;
}

/* Footer button als je hem “wit” wilde zoals eerder in je design */
.footerNewsletterForm .btn{
  background: #fff !important;
  color: #2b2b2b !important;
  box-shadow: none !important;
}

.footerNewsletterForm .btn:hover{
  background: #f0f0f0 !important;
  transform: translateY(-1px);
}

#heroShell{ font-size: 12px;
    font-family: "Outfit", system-ui, sans-serif !important;
    letter-spacing: .08em!important;
    line-height: 1.25;!important}

#heroShell .micro button:hover{
  color: rgba(43,43,43,.88) !important;
	cursor: pointer;
}


/* EXTRA: Twenty Twenty-One / Gutenberg knoppen die soms meeliften */
.newsletterForm .wp-element-button,
.footerNewsletterForm .wp-element-button,
.newsletterForm .wp-block-button__link,
.footerNewsletterForm .wp-block-button__link{
  all: unset;
}

#heroShell .actions .primary{
  color: #fff !important;
  opacity: 1 !important;
}
#heroShell .actions .primary:hover{
  color: #fff !important;
}
#heroShell .actions .ghost{
  color: rgba(43,43,43,.78) !important;
  opacity: 1 !important;
}
#heroShell .actions .ghost:hover{
  color: rgba(43,43,43,.92) !important; /* zwart(er) op hover */
}

/* 3) “Ontdek het boek” (CTA) terug forceren in de hero */
#heroShell .cta{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
margin-top: 20px;
  background: var(--btn) !important;
  color: #fff !important;
  text-decoration: none !important;

  padding: 14px 26px !important;
  border-radius: 6px !important;

  font-family: "Outfit", system-ui, sans-serif !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  box-shadow: 0 18px 44px rgba(75,60,243,.22) !important;
}
#heroShell .cta:hover{
  background: var(--btnHover) !important;
  color: #fff !important;
}

/* 4) Footer typografie/ruimte: zet het weer “zoals origineel” (compact en strak) */
.footer{
  font-family: "Fraunces", Georgia, serif !important;
  line-height: 1.6 !important;
}

.footerAboutText,
.footerNewsletterDesc,
.footerLink{
  line-height: 1.6 !important;
  letter-spacing: normal !important;
}

.footerCol h4{
  font-family:"Outfit",system-ui,sans-serif !important;
  letter-spacing:.24em !important;
  line-height: 1.2 !important;
}

/* input/button in footer: voorkom dat line-height/letterspacing “uit elkaar” loopt */
.footerNewsletterForm input[type="email"],
.footerNewsletterForm .btn{
  letter-spacing: normal !important;
  line-height: 1.2 !important;
}

/* =========================
   HERO AUDIO – Drijvend bootje
   ========================= */
#heroShell .heroSound {
  position: absolute;
  left: 28px;
  bottom: 108px;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 6px 20px rgba(0,0,0,.05);
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: all .32s cubic-bezier(.4, 0, .2, 1);
  outline: none;
}

#heroShell .heroSound:hover {
  background: rgba(255,255,255,.76);
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 10px 28px rgba(0,0,0,.08);
  transform: translateY(-1px);
}
#heroShell .heroSound:active {
  transform: translateY(0) scale(.97);
  transition-duration: .1s;
}
#heroShell .heroSound:focus-visible {
  outline: 2px solid rgba(75,60,243,.3);
  outline-offset: 4px;
}

/* Bootje */
#heroShell .boat-icon {
  width: 26px;
  height: 20px;
  flex-shrink: 0;
  animation: bob 4s ease-in-out infinite;
	padding: 2px;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30%      { transform: translateY(-1.5px) rotate(1deg); }
  60%      { transform: translateY(0.5px) rotate(-0.6deg); }
  80%      { transform: translateY(-0.8px) rotate(0.4deg); }
}

/* Watergolfjes (verborgen bij OFF, zichtbaar bij ON) */
#heroShell .water-ripple {
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 76%;
  height: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
#heroShell .water-ripple .ripple-line {
  fill: none;
  stroke: rgba(75,60,243,.22);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* Label */
#heroShell .sound-label {
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(43,43,43,.4);
  margin-left: 10px;
  transition: color .3s ease;
  white-space: nowrap;
padding: 5px;
}
/* ── STATE: AAN ── */
#heroShell .heroSound[aria-pressed="true"] {
  background: rgba(36,42,54,.88) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 10px 32px rgba(0,0,0,.12) !important;
}
#heroShell .heroSound[aria-pressed="true"] .boat-icon path,
#heroShell .heroSound[aria-pressed="true"] .boat-icon line {
  stroke: rgba(255,255,255,.8) !important;
}
#heroShell .heroSound[aria-pressed="true"] .boat-icon .flag {
  stroke: rgba(200,169,94,.7) !important;
  fill: rgba(200,169,94,.15) !important;
}
#heroShell .heroSound[aria-pressed="true"] .sound-label {
  color: rgba(255,255,255,.4) !important;
}
#heroShell .heroSound[aria-pressed="true"] .water-ripple {
  opacity: 1;
}
#heroShell .heroSound[aria-pressed="true"] .water-ripple .ripple-line {
  stroke: rgba(255,255,255,.15);
}

/* Golfjes animatie alleen als audio speelt */
#heroShell .heroSound[aria-pressed="true"] .ripple-1 {
  animation: wave 2.8s ease-in-out infinite;
}
#heroShell .heroSound[aria-pressed="true"] .ripple-2 {
  animation: wave 2.8s ease-in-out infinite .7s;
}
@keyframes wave {
  0%, 100% { d: path("M4,3 Q14,0.5 24,3 Q34,5.5 44,3"); opacity: .5; }
  50%      { d: path("M4,3 Q14,5.5 24,3 Q34,0.5 44,3"); opacity: .9; }
}

/* Mobiel */
@media (max-width: 640px) {
  #heroShell .heroSound {
    left: 16px;
    bottom: 80px;
    padding: 10px 14px;
  }
  #heroShell .boat-icon { 
    width: 22px; 
    height: 17px; 
  }
  #heroShell .sound-label { 
    font-size: 9px; 
    margin-left: 8px; 
  }
}

/* ===== Mailchimp Plugin Styling ===== */

/* Verberg plugin defaults */
.mc4wp-form label,
.mc4wp-form p {
  margin: 0;
  padding: 0;
}

/* Newsletter sectie form */
.newsletterInner .mc4wp-form {
  margin-bottom: 0;
}

.newsletterInner .mc4wp-form .newsletterForm {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.newsletterInner .mc4wp-form input[type="email"] {
  flex: 1;
  min-width: 280px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 16px;
  padding: 18px 24px;
  border: 2px solid rgba(43,43,43,.12);
  border-radius: 12px;
  background: white;
  color: var(--ink);
  transition: all .2s ease;
}

.newsletterInner .mc4wp-form input[type="email"]:focus {
  outline: none;
  border-color: var(--btn);
  box-shadow: 0 0 0 4px rgba(75,60,243,.08);
}

.newsletterInner .mc4wp-form input[type="email"]::placeholder {
  color: rgba(43,43,43,.5);
}

.newsletterInner .mc4wp-form .btn,
.newsletterInner .mc4wp-form button[type="submit"] {
  display: inline-block;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 18px 40px;
  background: var(--btn);
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: all .2s ease;
  border: 0;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(75,60,243,.24);
  white-space: nowrap;
}

.newsletterInner .mc4wp-form .btn:hover,
.newsletterInner .mc4wp-form button[type="submit"]:hover {
  background: var(--btnHover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(75,60,243,.32);
}

/* Success/error messages */
.newsletterInner .mc4wp-alert {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

.newsletterInner .mc4wp-success {
  background: rgba(75,60,243,.1);
  color: var(--btn);
  border: 1px solid rgba(75,60,243,.2);
}

.newsletterInner .mc4wp-error {
  background: rgba(255,59,59,.1);
  color: #ff3b3b;
  border: 1px solid rgba(255,59,59,.2);
}

/* Mobile responsive */
@media(max-width:600px){
  .newsletterInner .mc4wp-form .newsletterForm {
    flex-direction: column;
    gap: 10px;
  }
  
  .newsletterInner .mc4wp-form input[type="email"] {
    min-width: 100%;
  }
  
  .newsletterInner .mc4wp-form .btn,
  .newsletterInner .mc4wp-form button[type="submit"] {
    width: 100%;
    text-align: center;
  }
}

/* Standaard = footer styling */
.mc4wp-form .mc4wp-newsletter-wrapper {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.mc4wp-form input[type="email"] {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 15px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: white;
}

/* Als form IN newsletter sectie zit = andere styling */
.newsletterInner .mc4wp-form .mc4wp-newsletter-wrapper {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-direction: row;
}

.newsletterInner .mc4wp-form input[type="email"] {
  flex: 1;
  min-width: 280px;
  padding: 18px 24px;
  border: 2px solid rgba(43,43,43,.12);
  background: white;
  color: var(--ink);
  font-size: 16px;
}

.newsletterInner .mc4wp-form button[type="submit"] {
  padding: 18px 40px;
  font-size: 16px;
  white-space: nowrap;
}

/* Footer newsletter form */
.footerCol .mc4wp-form {
  margin: 0;
}

.footerCol .mc4wp-form .footerNewsletterForm {
  display: flex;
  gap: 8px;
  flex-direction: column;
}

.footerCol .mc4wp-form input[type="email"] {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 15px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: rgba(255,255,255,.05);
  color: white;
  transition: all .2s ease;
}

.footerCol .mc4wp-form input[type="email"]::placeholder {
  color: rgba(255,255,255,.4);
}

.footerCol .mc4wp-form input[type="email"]:focus {
  outline: none;
  border-color: rgba(255,255,255,.5);
  background: rgba(255,255,255,.08);
}

.footerCol .mc4wp-form button[type="submit"] {
  width: 100%;
  background: white;
  color: #2b2b2b;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 14px 18px;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
  justify-content: center;
}

.footerCol .mc4wp-form button[type="submit"]:hover {
  background: #f0f0f0;
  transform: translateY(-1px);
}

.footerCol .mc4wp-alert {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 13px;
}

.footerCol .mc4wp-success {
  background: rgba(255,255,255,.15);
  color: white;
  border: 1px solid rgba(255,255,255,.3);
}

.footerCol .mc4wp-error {
  background: rgba(255,59,59,.15);
  color: #ffcccc;
  border: 1px solid rgba(255,59,59,.3);
}

.orderWrap {
  position: relative;
  display: inline-block;
}

.orderChevron {
  margin-left: 6px;
  transition: transform 0.25s ease;
  vertical-align: middle;
}

.orderWrap.open .orderChevron {
  transform: rotate(180deg);
}

.orderPopup {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  min-width: 240px;
  background: var(--btn);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(75, 60, 243, .24);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 999;
}

.orderPopup::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: var(--btn);
}

.orderWrap.open .orderPopup {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.orderOption {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 6px;
  text-decoration: none;
  color: white;
  font-family: "Outfit", system-ui, sans-serif;
  transition: background 0.15s ease;
}

.orderOption:hover {
  background: rgba(255, 255, 255, 0.12);
}

.orderOption strong {
  display: block;
  font-size: 0.92rem;
  font-weight: 500;
  color: white;
}

.orderOption small {
  display: block;
  font-size: 0.77rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1px;
}

.orderIcon {
  font-size: 1.2rem;
  line-height: 1;
  flex-shrink: 0;
}

.footer .orderPopup {
  background: #2b2b2b;
  border: 1px solid rgba(255,255,255,.12);
}
.footer .orderPopup::after {
  background: #2b2b2b;
  border-right: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

@media (max-width: 720px) {
  .micro {
    display: none;
  }
}

@media (max-width: 720px) {
  .cursor { display: none !important; }
}

@media (max-width: 720px) {
  .grid {
    display: none;
  }
}