/* ═══════════════════════════════════════════════════════════════════════════
   follow-strip.css — "Volg de reis"-strook
   ───────────────────────────────────────────────────────────────────────────
   Eén herbruikbaar, on-brand component (papier/roest/eucalyptus). Nieuwsbrief-CTA
   (Substack) primair + social-iconen secundair. GEEN popup — een rustige strook
   net boven de footer. File://-proof: faalt het script, dan blijven de links
   gewoon klikbaar. Leunt op de bestaande design-tokens uit rebuild.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.follow-strip{
  --fs-paper:#f4ece0; --fs-paper-2:#efe6d6; --fs-ink:#23201b; --fs-soft:#6a6155;
  --fs-rust:#a8492a; --fs-rust-2:#c9714f; --fs-euca:#5f7560; --fs-line:#ddd1bd;
  background:
    radial-gradient(120% 120% at 0% 0%, var(--fs-paper-2), var(--fs-paper) 60%);
  border-top:1px solid var(--fs-line);
  border-bottom:1px solid var(--fs-line);
  color:var(--fs-ink);
  padding:46px 0;
  position:relative;
}
.follow-strip::before{
  /* zachte roest-accentlijn bovenaan, in DNA */
  content:""; position:absolute; left:0; right:0; top:-1px; height:3px;
  background:linear-gradient(90deg,var(--fs-rust),var(--fs-rust-2) 45%,var(--fs-euca));
  opacity:.85;
}
.follow-strip .wrap{max-width:920px;margin:0 auto;padding:0 24px}
.follow-strip-inner{
  display:flex; gap:34px; align-items:center; justify-content:space-between;
  flex-wrap:wrap;
}
.follow-strip-lede{flex:1 1 320px;min-width:280px}
.follow-strip-eyebrow{
  font-family:var(--f-m,"JetBrains Mono",monospace); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fs-rust); margin:0 0 8px;
}
.follow-strip-title{
  font-family:var(--f-s,"Spectral",Georgia,serif); font-size:clamp(22px,3.4vw,28px);
  line-height:1.15; font-weight:600; margin:0 0 6px; letter-spacing:-.01em;
}
.follow-strip-body{font-size:15.5px; color:var(--fs-soft); margin:0; max-width:42ch}

.follow-strip-action{flex:1 1 320px;min-width:280px}
.follow-strip-form{display:flex; gap:10px; flex-wrap:wrap}
.follow-strip-form input[type="email"]{
  flex:1 1 180px; min-width:0; padding:13px 15px; font-size:15px;
  font-family:var(--f-h,"Hanken Grotesk",system-ui,sans-serif);
  background:#fffdf8; border:1px solid var(--fs-line); border-radius:10px; color:var(--fs-ink);
}
.follow-strip-form input[type="email"]:focus{
  outline:none; border-color:var(--fs-rust); box-shadow:0 0 0 3px rgba(168,73,42,.14);
}
.follow-strip-form button{
  padding:13px 22px; font-size:15px; font-weight:600; cursor:pointer;
  font-family:var(--f-h,"Hanken Grotesk",system-ui,sans-serif);
  background:var(--fs-rust); color:#fff; border:1px solid var(--fs-rust); border-radius:10px;
  transition:background .15s ease;
}
.follow-strip-form button:hover{background:#8f3c22}
.follow-strip-note{font-size:12.5px; color:var(--fs-soft); margin:10px 0 0}
.follow-strip-msg{font-size:13px; color:var(--fs-euca); margin:6px 0 0; min-height:1em}

.follow-strip-socials{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px;
}
.follow-strip-socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:10px;
  background:#fffdf8; border:1px solid var(--fs-line); color:var(--fs-ink);
  text-decoration:none; transition:transform .12s ease, border-color .12s ease, color .12s ease;
}
.follow-strip-socials a:hover{transform:translateY(-2px); border-color:var(--fs-rust); color:var(--fs-rust)}
.follow-strip-socials svg{width:20px; height:20px; display:block}
.follow-strip-socials a .fs-label{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}

@media (max-width:680px){
  .follow-strip{padding:36px 0}
  .follow-strip-inner{gap:22px}
}
@media (prefers-reduced-motion: reduce){
  .follow-strip-socials a:hover{transform:none}
}