/* ---- Fonts (zelf-gehost; Spectral/Jost/Cormorant-italic alleen op deze pagina) ---- */
    @font-face {
      font-family: 'Cormorant Garamond';
      font-style: normal;
      font-weight: 400 600;
      font-display: swap;
      src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Cormorant Garamond';
      font-style: italic;
      font-weight: 300 700;
      font-display: swap;
      src: url('../fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Spectral';
      font-style: normal;
      font-weight: 300;
      font-display: swap;
      src: url('../fonts/spectral-normal-300-latin.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Spectral';
      font-style: italic;
      font-weight: 300;
      font-display: swap;
      src: url('../fonts/spectral-italic-300-latin.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Spectral';
      font-style: normal;
      font-weight: 600;
      font-display: swap;
      src: url('../fonts/spectral-normal-600-latin.woff2') format('woff2');
    }
    @font-face {
      font-family: 'Jost';
      font-style: normal;
      font-weight: 400 500;
      font-display: swap;
      src: url('../fonts/jost-normal-400-latin.woff2') format('woff2');
    }

    :root{
      --bg:#18120d;
      --bg-soft:#1e1712;
      --text:#e7dccb;
      --text-strong:#f3ead8;
      --muted:#a8967f;
      --gold:#cba46b;
      --gold-bright:#dcbc86;
      --blue:#93a7bb;
      --rule:rgba(203,164,107,.35);
      --rule-soft:rgba(231,220,203,.12);
      --measure:640px;
      --measure-wide:780px;
      --pad-x:clamp(20px,5vw,48px);
      --section-y:clamp(44px,6vw,72px);
    }

    /* ---- Licht thema (donker blijft default; zelfde toggle als de rest) ---- */
    html[data-theme="light"]{
      --bg:#f3ece2;
      --bg-soft:#fbf6ee;
      --text:#2a2118;
      --text-strong:#171009;
      --muted:#6a5d4c;
      --gold:#8a6433;
      --gold-bright:#a37c46;
      --blue:#5b6f83;
      --rule:rgba(138,100,51,.30);
      --rule-soft:rgba(30,24,19,.12);
    }
    html[data-theme="light"] header{background:rgba(243,236,226,.72);}
    html[data-theme="light"] header.scrolled{background:rgba(243,236,226,.9);}
    html[data-theme="light"] body::before{
      background:
        radial-gradient(120% 80% at 50% -10%, rgba(138,100,51,.05), transparent 60%),
        radial-gradient(90% 60% at 50% 120%, rgba(90,110,130,.04), transparent 55%);
    }

    *{box-sizing:border-box;}
    html{-webkit-text-size-adjust:100%;}
    body{
      margin:0;
      background:var(--bg);
      color:var(--text);
      font-family:"Spectral",Georgia,serif;
      font-size:clamp(18px,2.1vw,20px);
      line-height:1.78;
      font-weight:300;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    /* subtiele warme diepte in het paginaveld */
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        radial-gradient(120% 80% at 50% -10%, rgba(203,164,107,.06), transparent 60%),
        radial-gradient(90% 60% at 50% 120%, rgba(147,167,187,.05), transparent 55%);
      z-index:0;
    }

    a{color:inherit;}
    img{max-width:100%;display:block;}

    .wrap{
      width:100%;
      max-width:1120px;
      margin:0 auto;
      padding-inline:var(--pad-x);
      position:relative;
      z-index:1;
    }

    /* ---------- Header ---------- */
    header{
      position:sticky;
      top:0;
      z-index:20;
      background:rgba(24,18,13,.72);
      backdrop-filter:blur(10px);
      -webkit-backdrop-filter:blur(10px);
      border-bottom:1px solid transparent;
      transition:border-color .4s ease, background .4s ease;
    }
    header.scrolled{
      border-bottom-color:var(--rule-soft);
      background:rgba(24,18,13,.9);
    }
    .nav{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      padding-block:18px;
    }
    .brand{
      display:inline-flex;align-items:center;
    }
    .brand-logo{display:block;height:26px;width:auto;}
    [data-theme="dark"] .brand-logo--light,
    [data-theme="light"] .brand-logo--dark{display:none;}
    @media (max-width:480px){ .brand-logo{height:22px;} }
    a.brand{display:inline-flex;align-items:center;text-decoration:none;transition:opacity .2s;}
    a.brand:hover{opacity:.75;}
    .footer-mark{display:block;height:34px;width:auto;}
    [data-theme="dark"] .footer-mark--light,
    [data-theme="light"] .footer-mark--dark{display:none;}
    .visually-hidden-brand{
      position:absolute;width:1px;height:1px;padding:0;margin:-1px;
      overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
    }
    .brand{
      font-family:"Jost",sans-serif;
      font-weight:500;
      letter-spacing:.34em;
      text-transform:uppercase;
      font-size:14px;
      color:var(--text-strong);
      text-decoration:none;
      white-space:nowrap;
    }
    .nav-links{
      display:flex;
      align-items:center;
      gap:12px;
      font-family:"Jost",sans-serif;
      font-size:13px;
      letter-spacing:.12em;
      text-transform:uppercase;
    }
    .nav-links a{text-decoration:none;color:var(--text);}
    .nav-link{
      padding:8px 4px;
      color:var(--muted)!important;
      transition:color .25s ease;
    }
    .nav-link:hover,.nav-link:focus-visible{color:var(--text-strong)!important;}
    .nav-btn{
      padding:9px 18px;
      border:1px solid var(--rule);
      border-radius:3px;
      color:var(--text)!important;
      transition:border-color .25s ease,color .25s ease,background .25s ease;
    }
    .nav-btn:hover,.nav-btn:focus-visible{
      border-color:var(--gold);
      color:var(--text-strong)!important;
      background:rgba(203,164,107,.08);
    }
    .theme-toggle{
      width:44px;height:44px;flex:0 0 auto;
      display:inline-flex;align-items:center;justify-content:center;
      background:transparent;border:1px solid var(--rule);border-radius:50%;
      cursor:pointer;padding:0;transition:border-color .2s;
    }
    .theme-toggle:hover{border-color:var(--gold);}
    .theme-toggle__icon{
      width:17px;height:17px;border-radius:50%;
      border:1.5px solid var(--text);
      background:linear-gradient(90deg,transparent 0 50%,var(--text) 50% 100%);
    }

    /* ---------- Eyebrow ---------- */
    .eyebrow{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      font-family:"Jost",sans-serif;
      font-size:12.5px;
      letter-spacing:.32em;
      text-transform:uppercase;
      color:var(--gold);
      margin:0 0 26px;
    }
    .eyebrow::before,.eyebrow::after{
      content:"";
      height:1px;
      width:34px;
      background:linear-gradient(90deg,transparent,var(--gold));
    }
    .eyebrow::after{background:linear-gradient(90deg,var(--gold),transparent);}

    /* ---------- Hero ---------- */
    .hero{
      padding-top:clamp(48px,7vw,84px);
      padding-bottom:clamp(32px,4.5vw,52px);
      text-align:center;
    }
    h1{
      font-family:"Cormorant Garamond",serif;
      font-weight:500;
      font-size:clamp(40px,6.6vw,66px);
      line-height:1.06;
      letter-spacing:-.005em;
      color:var(--text-strong);
      margin:0 auto;
      max-width:16ch;
    }
    h1 .coda{
      display:block;
      font-style:italic;
      font-weight:400;
      color:var(--gold);
    }
    .hero-intro{
      max-width:600px;
      margin:28px auto 0;
      font-size:clamp(18px,2.3vw,20.5px);
      line-height:1.72;
      color:var(--text);
    }

    /* ---------- Featured beeld ---------- */
    figure.featured{
      margin:clamp(38px,5.5vw,58px) auto 0;
      max-width:540px;
      text-align:center;
    }
    figure.featured img{
      width:100%;
      height:auto;
      margin:0 auto;
      border-radius:10px;
      border:1px solid rgba(226,205,168,.14);
      box-shadow:0 28px 64px -30px rgba(0,0,0,.78);
    }

    /* ---------- Artikel ---------- */
    .article{padding-block:clamp(20px,3vw,36px) var(--section-y);}
    .col{
      max-width:var(--measure);
      margin:0 auto;
    }
    .col p{
      margin:0 0 1.35em;
      color:var(--text);
    }
    .col p:last-child{margin-bottom:0;}
    strong{
      color:var(--text-strong);
      font-weight:600;
    }
    em,cite{font-style:italic;}

    /* Reflectie-vraag bij de hert-eigenschappen */
    .ask{
      display:block;
      margin-top:.35em;
      font-family:"Cormorant Garamond",serif;
      font-style:italic;
      font-size:1.12em;
      color:var(--gold);
    }

    /* Sectie-lijn + H2 */
    .rule{
      max-width:var(--measure);
      margin:0 auto;
      height:1px;
      background:linear-gradient(90deg,transparent,var(--rule) 22%,var(--rule) 78%,transparent);
    }
    h2{
      font-family:"Cormorant Garamond",serif;
      font-weight:500;
      font-size:clamp(30px,4.4vw,44px);
      line-height:1.14;
      letter-spacing:-.005em;
      color:var(--text-strong);
      max-width:var(--measure);
      margin:clamp(28px,3.5vw,40px) auto clamp(22px,3vw,32px);
    }
    h3{
      font-family:"Cormorant Garamond",serif;
      font-weight:600;
      font-size:clamp(23px,3vw,29px);
      line-height:1.22;
      color:var(--text-strong);
      max-width:var(--measure);
      margin:clamp(40px,5vw,60px) auto clamp(14px,1.8vw,20px);
    }
    h2:first-child{margin-top:0;}
    .after-h2{margin-top:0;}

    /* ---------- Pullquote ---------- */
    .pullquote{
      max-width:var(--measure-wide);
      margin:clamp(46px,6vw,72px) auto;
      text-align:center;
      position:relative;
      padding:0 clamp(8px,4vw,40px);
    }
    .pullquote::before{
      content:"\201C";
      position:absolute;
      top:clamp(-34px,-4vw,-18px);
      left:50%;
      transform:translateX(-50%);
      font-family:"Cormorant Garamond",serif;
      font-size:clamp(90px,13vw,140px);
      line-height:1;
      color:var(--gold);
      opacity:.22;
      pointer-events:none;
    }
    .pullquote p{
      position:relative;
      font-family:"Cormorant Garamond",serif;
      font-style:italic;
      font-weight:500;
      font-size:clamp(28px,5vw,44px);
      line-height:1.2;
      color:var(--text-strong);
      margin:0;
    }

    /* ---------- CTA ---------- */
    .cta{
      text-align:center;
      padding-top:clamp(44px,6vw,72px);
      padding-bottom:clamp(56px,8vw,96px);
      background:
        radial-gradient(120% 90% at 50% 0%, rgba(203,164,107,.07), transparent 62%);
    }
    .cta h2{
      margin:0 auto;
      max-width:18ch;
      font-size:clamp(31px,5.2vw,50px);
    }
    .cta-intro{
      max-width:560px;
      margin:26px auto 0;
      color:var(--text);
    }
    .btn-row{margin-top:clamp(30px,4vw,42px);}
    .btn{
      display:inline-block;
      font-family:"Jost",sans-serif;
      font-size:14px;
      letter-spacing:.14em;
      text-transform:uppercase;
      text-decoration:none;
      border-radius:3px;
      transition:transform .25s ease,background .25s ease,border-color .25s ease,color .25s ease,box-shadow .25s ease;
    }
    .btn-primary{
      background:var(--gold);
      color:#1c150e;
      padding:16px 40px;
      border:1px solid var(--gold);
      box-shadow:0 10px 34px -18px rgba(203,164,107,.9);
    }
    .btn-primary:hover,.btn-primary:focus-visible{
      background:var(--gold-bright);
      border-color:var(--gold-bright);
      transform:translateY(-2px);
    }
    .newsletter-line{
      margin:clamp(38px,5vw,56px) auto 0;
      max-width:520px;
      color:var(--muted);
      font-size:clamp(17px,2vw,19px);
    }
    .keepsake-line{
      margin:clamp(24px,3.2vw,34px) auto 0;
      max-width:520px;
      color:var(--muted);
      font-size:clamp(15px,1.7vw,16.5px);
    }
    .keepsake-line a{
      color:var(--gold);
      text-decoration:none;
      border-bottom:1px solid var(--rule);
      transition:color .25s ease,border-color .25s ease;
    }
    .keepsake-line a:hover,.keepsake-line a:focus-visible{
      color:var(--gold-bright);
      border-color:var(--gold-bright);
    }
    .btn-secondary{
      margin-top:20px;
      background:transparent;
      color:var(--text);
      padding:14px 34px;
      border:1px solid var(--rule);
    }
    .btn-secondary:hover,.btn-secondary:focus-visible{
      border-color:var(--gold);
      color:var(--text-strong);
      background:rgba(203,164,107,.07);
      transform:translateY(-2px);
    }
    .signoff{
      margin:clamp(34px,4vw,46px) 0 0;
      font-family:"Cormorant Garamond",serif;
      font-style:italic;
      font-size:clamp(20px,2.6vw,24px);
      color:var(--gold);
    }

    /* ---------- Footer ---------- */
    footer{
      border-top:1px solid var(--rule-soft);
      padding-block:34px;
    }
    .foot{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      flex-wrap:wrap;
      font-family:"Jost",sans-serif;
      font-size:13px;
      letter-spacing:.06em;
      color:var(--muted);
    }
    .foot .brand{color:var(--text);}
    .foot a{color:var(--muted);text-decoration:none;transition:color .25s ease;}
    .foot a:hover,.foot a:focus-visible{color:var(--text-strong);}
    .foot .dot{opacity:.5;padding:0 4px;}

    /* ---------- Persoonlijk woord vooraf ---------- */
    .note{
      max-width:var(--measure);
      margin:0 auto;
      padding:clamp(22px,3vw,30px) clamp(22px,3.4vw,34px);
      background:var(--bg-soft);
      border:1px solid var(--rule-soft);
      border-left:2px solid var(--gold);
      border-radius:4px;
    }
    .note p{
      margin:0 0 1em;
      font-style:italic;
      color:var(--text);
    }
    .note p:last-child{margin-bottom:0;}

    /* ---------- Lijsten binnen de kolom ---------- */
    .col ul{
      margin:0 0 1.35em;
      padding:0;
      list-style:none;
    }
    .col ul li{
      position:relative;
      padding-left:1.5em;
      margin:0 0 .5em;
    }
    .col ul li:last-child{margin-bottom:0;}
    .col ul li::before{
      content:"";
      position:absolute;
      left:.2em;
      top:.78em;
      width:6px;
      height:6px;
      border-radius:50%;
      background:var(--gold);
      opacity:.7;
    }
    /* Haar staccato-opsommingen: elke zin op een eigen regel, zoals in haar tekst */
    .col p.staccato{
      line-height:1.5;
      color:var(--text-strong);
    }

    /* Reflectievragen: zelfde register als .ask */
    .col ul.questions li{
      font-family:"Cormorant Garamond",serif;
      font-style:italic;
      font-size:1.14em;
      line-height:1.45;
      color:var(--gold);
      margin-bottom:.35em;
    }
    .col ul.questions li::before{top:.62em;}

    /* ---------- Focus + beweging ---------- */
    a:focus-visible,.btn:focus-visible,.theme-toggle:focus-visible{
      outline:2px solid var(--gold);
      outline-offset:3px;
    }

    .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .85s ease,transform .85s ease;}
    .js .reveal.in{opacity:1;transform:none;}

    @keyframes fadeUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
    .js .hero .eyebrow{animation:fadeUp .9s ease both;}
    .js .hero h1{animation:fadeUp .9s ease .08s both;}
    .js .hero .hero-intro{animation:fadeUp .9s ease .16s both;}
    .js .hero .featured{animation:fadeUp 1s ease .24s both;}

    @media (prefers-reduced-motion:reduce){
      *{animation:none!important;}
      .js .reveal{opacity:1!important;transform:none!important;transition:none!important;}
    }

    /* ---------- Responsive ---------- */
    @media (max-width:640px){
      .nav{flex-direction:column;gap:14px;padding-block:16px;}
      .nav-links{gap:8px;flex-wrap:wrap;justify-content:center;}
      .nav-link{padding:6px 3px;}
    }