/* Wealthy Parrot shared chrome: tokens, buttons, header, signup form, footer.
   Loaded on every template (wp-home-layout.hbs and default.hbs). Dark-mode token overrides stay in wp-home.css,
   because the article templates are light-only. Page-level rules live in wp-home.css. */
:root{
  /* ink + neutrals (warm-biased toward the ink hue, not pure gray) */
  --ink:        #3B2B42;
  --ink-80:     rgba(59,43,66,.80);
  --ink-60:     rgba(59,43,66,.72);
  --ink-45:     rgba(59,43,66,.45);
  --ink-12:     rgba(59,43,66,.12);
  --ink-07:     rgba(59,43,66,.07);
  --paper:      #FFFFFF;
  --paper-2:    #FAF9F7;   /* whisper-warm off-white, NOT cream */
  --line:       rgba(59,43,66,.10);
  /* brand accents - used sparingly */
  --pink:       #D5006B;
  --pink-ink:   #C40E5C;   /* darker pink that passes small-text contrast */
  --teal:       #036563;   /* link + small accents */
  /* low-saturation tints for tile washes (accent, never full fill) */
  --tint-pink:  #FBE1EC;
  --tint-green: #E7F8EE;
  --tint-blue:  #E3ECF7;
  --tint-yellow:#FBEFD6;
  --green:      #62DC99;
  --blue:       #0E5FA6;
  --yellow:     #E9A21B;
  /* elevation scale (light from above, layered, soft) */
  --e1: 0 1px 2px rgba(59,43,66,.05), 0 1px 3px rgba(59,43,66,.05);
  --e2: 0 2px 4px rgba(59,43,66,.04), 0 6px 16px rgba(59,43,66,.07);
  --e3: 0 8px 20px rgba(59,43,66,.08), 0 20px 48px rgba(59,43,66,.10);
  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --maxw: 1160px;
  --radius: 20px;
  --radius-sm: 12px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
:focus-visible{outline:2.5px solid var(--pink);outline-offset:3px;border-radius:4px}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pink-ink)}
.h2{font-size:clamp(1.7rem,3vw,2.35rem);font-weight:800;line-height:1.1;letter-spacing:-.02em}
.mut{color:var(--ink-60)}
/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:1rem;
  border:0;cursor:pointer;border-radius:12px;padding:14px 22px;transition:transform .14s ease,box-shadow .14s ease,background .14s}
.btn-pink{background:var(--pink);color:#fff;box-shadow:var(--e2)}
.btn-pink:hover{transform:translateY(-2px);box-shadow:var(--e3)}
.btn-pink:active{transform:translateY(0)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink-12)}
.btn-ghost:hover{border-color:var(--ink-45)}
.btn-sm{padding:9px 16px;font-size:.9rem;border-radius:10px}

/* ============================================================ NAV */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.nav.scrolled{border-color:var(--line);box-shadow:var(--e1)}
.nav-in{display:flex;align-items:center;gap:28px;height:70px}
.brand{display:flex;align-items:center;gap:10px}
.logo{height:42px;width:auto;display:block}
.foot .logo{height:40px}
.nav-links{display:flex;gap:26px;margin-left:auto}
.nav-links a{color:var(--ink-80);font-weight:600;font-size:.94rem}
.nav-links a:hover{color:var(--ink)}
.nav-cta{margin-left:4px}
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:10px;background:transparent;color:var(--ink-80);cursor:pointer}
.nav-search:hover{color:var(--ink);background:var(--ink-07)}
.nav-search svg{width:20px;height:20px}
.nav-toggle{display:none;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:10px;background:transparent;cursor:pointer;position:relative}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{position:absolute;left:11px;width:16px;height:2px;border-radius:2px;background:var(--ink);content:"";transition:transform .2s,opacity .2s}
.nav-toggle span{top:18px}
.nav-toggle span::before{left:0;top:-5px}
.nav-toggle span::after{left:0;top:5px}
.nav.open .nav-toggle span{background:transparent}
.nav.open .nav-toggle span::before{transform:translateY(5px) rotate(45deg)}
.nav.open .nav-toggle span::after{transform:translateY(-5px) rotate(-45deg)}
.form{display:flex;gap:10px;max-width:440px}
.form input{flex:1;min-width:0;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--ink-12);border-radius:12px;padding:14px 16px;box-shadow:var(--e1)}
.form input::placeholder{color:var(--ink-45)}
.form input:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px var(--tint-pink)}
.band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-in{text-align:center;padding:var(--s9) 24px;max-width:calc(40ch + 48px);margin:0 auto}
.band .h2{margin-bottom:14px}
.band .form{margin:24px auto 0;justify-content:center}
/* ============================================================ FOOTER */
.foot{padding:var(--s8) 0 var(--s7)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding-bottom:var(--s7);border-bottom:1px solid var(--line)}
.foot h4{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);margin-bottom:14px}
.foot a{display:block;color:var(--ink-80);font-size:.94rem;padding:5px 0}
.foot a:hover{color:var(--ink)}
.foot .tag{color:var(--ink-60);font-size:.94rem;max-width:34ch;margin-top:12px}
.foot-bot{display:flex;justify-content:space-between;padding-top:24px;color:var(--ink-45);font-size:.85rem}
/* logos: dark-text logo on light grounds, light-text logo on dark */
.logo-on-dark{display:none}
/* members form states (Ghost adds .loading / .success / .error to the form) */
.form{flex-wrap:wrap}
.form .btn{position:relative}
.form .done{display:none}
.form.success .idle{display:none}
.form.success .done{display:inline}
.form.loading .btn{opacity:.7;pointer-events:none}
.form-msg{flex-basis:100%;margin:0;font-size:.9rem;color:var(--pink-ink)}
.form-msg:empty{display:none}
.band .form-msg{text-align:center}

/* header and footer on article templates inherit Source's body styles, so pin the type here */
.nav,.foot,.wp-signup{font-family:var(--font);font-size:17px;line-height:1.6;color:var(--ink)}
.nav a,.foot a,.wp-signup a{text-decoration:none}
.nav-links .nav-account{color:var(--ink-60)}
.wp-signup .band-in{padding:var(--s8) 24px}

@media(max-width:820px){
  .nav-in{gap:12px}
  .nav-search{margin-left:auto}
  .nav-cta{margin-left:0}
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;margin:0;padding:8px 24px 16px;
    background:var(--paper);border-bottom:1px solid var(--line);box-shadow:var(--e1)}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:14px 0;font-size:1.05rem;border-top:1px solid var(--line)}
  .nav-links a:first-child{border-top:0}
}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr;gap:28px}}
@media(max-width:560px){
  .nav-in{gap:8px}
  .nav .logo{height:34px}
  .nav-cta{padding:8px 12px;font-size:.85rem}
  .nav-search{width:36px}
  .foot-grid{grid-template-columns:1fr}
  .foot-bot{flex-direction:column;gap:8px}
  .form{flex-direction:column;max-width:none}
  .btn-pink{justify-content:center}
}