/* ============================================
   everwilde one — shared brand tokens
   Used by index.html and all blog pages.
   ============================================ */

:root{
  --paper:#F2EAD3;
  --bone:#FAF3DD;
  --shell:#E8DCB8;
  --green:#2E7E4F;
  --green-deep:#23633d;
  --magenta:#E94A8C;
  --magenta-deep:#C73474;
  --mustard:#E8B23C;
  --lilac:#C7B8E8;
  --ink:#1B1830;
  --ink-soft:#3a3450;

  --border-light:rgba(27,24,48,0.12);
  --border-dark:rgba(255,255,255,0.14);

  --r-pill:999px;
  --r-card:18px;
  --r-img:14px;
  --r-lg:22px;

  --ease:cubic-bezier(.2,.7,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
}

body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;
  z-index:200;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.7'/></svg>");
  opacity:0.18;
  mix-blend-mode:multiply;
}

h1,h2,h3,h4,h5,.display{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;
  letter-spacing:-0.025em;
  line-height:1.02;
  color:var(--ink);
}
h1{font-size:clamp(40px,5.4vw,72px);}
h2{font-size:clamp(28px,3.4vw,46px);}
h3{font-size:clamp(22px,2vw,28px);letter-spacing:-0.02em;}
h4{font-size:18px;letter-spacing:-0.01em;}

p{font-size:17px;line-height:1.6;color:var(--ink-soft);}

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

.wrap{max-width:1240px;margin:0 auto;padding:0 32px;position:relative;}

/* === NAV === */
nav.site{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 32px;gap:16px;
  background:rgba(242,234,211,0.88);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-light);
}
.wordmark{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;
  font-size:24px;
  letter-spacing:-0.04em;
  color:var(--green);
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.wordmark .wm-dot{
  display:inline-block;
  width:8px;height:8px;border-radius:50%;
  background:var(--magenta);
  margin:0 4px;
}
.nav-links{display:flex;gap:32px;list-style:none;align-items:center;}
.nav-links a{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;font-weight:500;color:var(--ink);
  letter-spacing:0.06em;text-transform:uppercase;
  transition:color .2s;
}
.nav-links a:hover,
.nav-links a.is-current{color:var(--magenta);}
.nav-cta{
  background:var(--magenta);color:#fff !important;
  padding:10px 14px 10px 18px;border-radius:var(--r-pill);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;gap:10px;
  transition:background .25s var(--ease);
  white-space:nowrap;
}
.nav-cta:hover{background:var(--magenta-deep);}
.nav-cta .arrow{
  width:26px;height:26px;border-radius:50%;background:var(--mustard);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.nav-cta .arrow svg{width:12px;height:12px;stroke:var(--ink);}

/* === FOOTER === */
footer.site{background:var(--ink);color:var(--bone);padding:72px 0 40px;position:relative;}
.footer-grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px;
}
.footer-wordmark{
  font-family:'Bricolage Grotesque',sans-serif;
  font-weight:800;
  font-size:34px;
  letter-spacing:-0.04em;
  color:var(--mustard);
  line-height:1;
  display:inline-flex;
  align-items:center;
  margin-bottom:20px;
}
.footer-wordmark .wm-dot{
  display:inline-block;
  width:10px;height:10px;border-radius:50%;
  background:var(--magenta);
  margin:0 6px;
}
.footer-tagline{
  font-size:15px;color:rgba(250,243,221,0.72);max-width:340px;
}
.footer-col h5{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-weight:500;
  font-size:11px;letter-spacing:0.08em;
  color:var(--mustard);margin-bottom:18px;text-transform:uppercase;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-col a{color:rgba(250,243,221,0.78);font-size:14px;transition:color .2s;}
.footer-col a:hover{color:var(--mustard);}
.footer-bottom{
  border-top:1px solid rgba(250,243,221,0.14);padding-top:24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;color:rgba(250,243,221,0.5);letter-spacing:0.04em;text-transform:uppercase;
}
.footer-bottom a{color:rgba(250,243,221,0.65);}

/* === EYEBROW === */
.eyebrow{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;font-weight:500;letter-spacing:0.08em;
  color:var(--green);
  display:inline-flex;align-items:center;gap:12px;margin-bottom:22px;
  text-transform:uppercase;
}
.eyebrow::before{content:'';width:24px;height:2px;background:var(--green);border-radius:2px;}

/* === PILLS === */
.pill{
  display:inline-flex;align-items:center;
  padding:7px 14px;border-radius:var(--r-pill);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;font-weight:500;letter-spacing:0.08em;
  white-space:nowrap;
  text-transform:uppercase;
}
.pill-magenta-fill{background:var(--magenta);color:#fff;}
.pill-magenta-outline{background:transparent;color:var(--magenta);border:1.5px solid var(--magenta);}
.pill-green-fill{background:var(--green);color:var(--bone);}
.pill-green-outline{background:transparent;color:var(--green);border:1.5px solid var(--green);}
.pill-mustard-ink{background:var(--mustard);color:var(--ink);}

/* === BUTTONS === */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 18px 14px 24px;min-height:50px;
  border-radius:var(--r-pill);
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:-0.01em;
  cursor:pointer;border:1.5px solid transparent;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px);}
.btn .arrow{
  width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease);flex-shrink:0;
}
.btn .arrow svg{width:14px;height:14px;transition:transform .25s var(--ease);}
.btn:hover .arrow svg{transform:translateX(2px);}
.btn-primary{background:var(--magenta);color:#fff;}
.btn-primary .arrow{background:var(--mustard);}
.btn-primary .arrow svg{stroke:var(--ink);}
.btn-primary:hover{background:var(--magenta-deep);box-shadow:0 14px 36px -16px rgba(233,74,140,0.55);}

/* === RESPONSIVE === */
@media (max-width: 820px){
  .wrap{padding:0 20px;}
  nav.site{padding:12px 18px;}
  .nav-links{display:none;}
  .nav-cta{font-size:12px;padding:9px 12px 9px 14px;}
  .nav-cta .arrow{width:22px;height:22px;}
  .wordmark{font-size:20px;}
  .footer-grid{grid-template-columns:1fr;gap:28px;}
  h1{font-size:clamp(32px,8.5vw,48px);}
  h2{font-size:clamp(26px,6.5vw,36px);}
}