/* Shared components — loaded by EVERY page.
 *
 * These live here rather than in styles.css or explore.css because the site has two
 * stylesheets with OPPOSITE themes: styles.css is dark (--ink is the background) and
 * explore.css is light (--ink is the text). The same token name means the reverse thing in
 * each, so anything shared must bring its own colours or it will be invisible on half the
 * site. The footer and the whitelist popup are deliberately a dark surface on both themes —
 * standard, legible, and it reads as intentional rather than as a mistake on the light pages.
 */

/* ── MAILING LIST (footer) ────────────────────────────────────────────────────────────
   Prefixed cbf- because .ft-* belongs to explore.css and colliding with it produced two
   footers on six pages. These sit inside whatever footer the page already has, so they must
   carry their own colours and not assume either theme. */
.cbf{position:relative;z-index:2;margin-top:clamp(3rem,8vw,6rem);background:#0f140a;color:#f4f0e3}
.cbf-in{max-width:760px;margin:0 auto;padding:1.6rem 0;text-align:left}
.cbf-sub h3{font-size:clamp(1.15rem,3.2vw,1.5rem);margin-bottom:.35rem;color:inherit}
.cbf-mut{opacity:.7;margin-bottom:.9rem;max-width:46ch}
.cbf-form{display:flex;gap:.6rem;flex-wrap:wrap;max-width:520px}
.cbf-form input{flex:1 1 220px;min-width:0;padding:.8rem 1rem;border-radius:999px;
  border:2px solid rgba(128,128,128,.35);background:rgba(128,128,128,.10);
  color:inherit;font:inherit;font-size:1rem}
.cbf-form input::placeholder{opacity:.55}
.cbf-form input:focus{outline:none;border-color:#57c93f}
.cbf-form button{padding:.8rem 1.4rem;border-radius:999px;border:none;cursor:pointer;
  background:#57c93f;color:#08210b;font:inherit;font-weight:800;font-size:1rem;
  transition:background .15s,transform .1s}
.cbf-form button:hover{background:#3a9a2b}
.cbf-form button:active{transform:translateY(1px)}
.cbf-form button:disabled{opacity:.6;cursor:default}
.cbf-msg{min-height:1.4em;margin-top:.6rem;font-size:.94rem}
.cbf-msg.good{color:#7ee063}
.cbf-msg.bad{color:#ff9068}
.cbf-legal{font-size:.8rem;opacity:.6;margin-top:.9rem;max-width:62ch}
.cbf-legal a{color:inherit;text-decoration:underline}
.cbf-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin:1.6rem 0 1rem}
.cbf-nav a{color:inherit;opacity:.7;text-decoration:none;font-size:.95rem}
.cbf-nav a:hover{opacity:1;text-decoration:underline}
.cbf-fine{opacity:.5;font-size:.82rem}

/* ── WHITELIST POPUP ──────────────────────────────────────────────────────────────────── */
.wl-wrap{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:1.1rem;
  background:rgba(6,9,4,.72);backdrop-filter:blur(4px);opacity:0;transition:opacity .22s}
.wl-wrap.in{opacity:1}
.wl{width:min(430px,100%);max-height:90vh;overflow-y:auto;background:#0f140a;color:#f4f0e3;
  border:1px solid rgba(244,240,227,.16);border-radius:20px;padding:1.6rem 1.4rem 1.3rem;
  position:relative;transform:translateY(10px) scale(.985);transition:transform .22s}
.wl-wrap.in .wl{transform:none}
.wl h3{font-size:1.5rem;margin-bottom:.5rem;color:#f4f0e3}
.wl p{color:rgba(244,240,227,.66);margin-bottom:1rem;line-height:1.55}
.wl-x{position:absolute;top:.55rem;right:.7rem;background:none;border:none;cursor:pointer;
  color:rgba(244,240,227,.66);font-size:1.7rem;line-height:1;padding:.2rem .4rem}
.wl-x:hover{color:#f4f0e3}
.wl-form{display:flex;flex-direction:column;gap:.6rem}
.wl-form input{padding:.85rem 1rem;border-radius:999px;border:2px solid rgba(244,240,227,.22);
  background:rgba(244,240,227,.06);color:#f4f0e3;font:inherit;font-size:1rem}
.wl-form input::placeholder{color:rgba(244,240,227,.45)}
.wl-form input:focus{outline:none;border-color:#57c93f}
.wl-form button{padding:.85rem 1.2rem;border-radius:999px;border:none;cursor:pointer;
  background:#57c93f;color:#08210b;font:inherit;font-weight:800;font-size:1rem}
.wl-form button:hover{background:#3a9a2b}
.wl-form button:disabled{opacity:.6;cursor:default}
.wl-msg{min-height:1.3em;margin-top:.6rem;font-size:.93rem}
.wl-msg.good{color:#7ee063}
.wl-msg.bad{color:#ff9068}
.wl-fine{font-size:.8rem;margin:.9rem 0 0;color:rgba(244,240,227,.5)}
.wl-fine a{color:inherit;text-decoration:underline}