/* Quick Pickle shared styles. White, fresh pickle green, soft pastels. */
:root {
  --green: #1e7a34;
  --green-dark: #14532d;
  --ink: #24303a;
  --muted: #5a6f79;
  --soft: #8a9aa3;
  --green-tint: #eef7ec;
  --yellow-tint: #fff8e1;
  --blue-tint: #eff6ff;
  --yellow-warm: #fffbeb;
  --yellow-line: #f5b942;
  --border: #ececea;
}
* { box-sizing: border-box; }
body { margin:0; padding:0; background:#ffffff; color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6; }
a { color:var(--green); }
.wrap { max-width:720px; margin:0 auto; padding:24px 18px 40px; }

/* Masthead */
.masthead { max-width:900px; margin:0 auto; padding:26px 18px 14px;
  display:flex; flex-direction:column; align-items:center; gap:12px; }
.brand { text-decoration:none; text-align:center; }
.brand img { max-width:300px; width:100%; height:auto; display:block; margin:0 auto 6px; }
.tagline { font-size:14px; color:var(--muted); font-style:italic; margin:0; }
nav { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; padding:10px 0; }
nav a { font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:2px; }
nav a:hover { color:var(--green); border-bottom-color:var(--green); }

/* Hero Take */
.hero { background:linear-gradient(135deg,var(--green-tint) 0%,var(--yellow-tint) 100%);
  border:1px solid #ddebd6; border-radius:18px; padding:28px; margin:18px 0 24px; }
.hero .label { display:inline-block; font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--green); font-weight:700; margin:0 0 10px; border:1px solid var(--green);
  background:#ffffff; border-radius:999px; padding:5px 12px; }
.hero h1 { font-size:26px; line-height:1.3; margin:0 0 12px; color:var(--green-dark); }
.hero p { font-size:15px; line-height:1.65; color:#3c4a3e; margin:0 0 10px; }
.hero p:last-child { margin-bottom:0; }

/* Mission intro */
.intro { background:#ffffff; border:1px solid #ddebd6; border-left:5px solid var(--green);
  border-radius:14px; padding:22px 24px; margin:0 0 24px; }
.intro h2 { font-size:20px; margin:0 0 10px; color:var(--green-dark); }
.intro p { font-size:15px; line-height:1.65; color:#3c4a3e; margin:0 0 10px; }
.intro p:last-child { margin-bottom:0; }
.intro .closer { font-weight:700; color:var(--green-dark); }

/* Signup box */
.signup { background:var(--yellow-warm); border:2px dashed var(--yellow-line);
  border-radius:16px; padding:26px 26px 24px; margin:24px 0; text-align:center; }
.signup h2 { font-size:21px; margin:0 0 6px; color:var(--green-dark); }
.signup p { font-size:14.5px; color:#3c4a56; margin:0 0 16px; }
.subscribe-btn { background:#c9d6cb; color:#ffffff; font-weight:700; font-size:15px;
  border:none; border-radius:999px; padding:12px 40px; cursor:not-allowed; letter-spacing:.5px; }

/* Kit embed form (official JS embed, styled to match the site) */
.signup .formkit-form { max-width:440px !important; margin:0 auto !important; border:none !important;
  box-shadow:none !important; background:transparent !important; padding:0 !important; }
.signup .formkit-fields { display:flex !important; flex-direction:column !important; gap:10px !important; }
.signup .formkit-field { margin:0 !important; }
.signup .formkit-input { font-size:16px !important; padding:13px 20px !important; border:2px solid var(--yellow-line) !important;
  border-radius:999px !important; background:#ffffff !important; width:100% !important; box-sizing:border-box !important;
  color:#1f2937 !important; }
.signup .formkit-input:focus { outline:none !important; border-color:var(--green) !important; }
.signup .formkit-input::placeholder { color:#9aa5b1 !important; }
.signup .formkit-submit { margin:0 !important; }
.signup .formkit-submit > button, .signup button.formkit-button, .signup .formkit-button {
  background:var(--green) !important; color:#ffffff !important; font-weight:700 !important; font-size:15px !important;
  border:none !important; border-radius:999px !important; padding:13px 40px !important; cursor:pointer !important;
  letter-spacing:.5px !important; width:100% !important; box-shadow:none !important; text-shadow:none !important; }
.signup .formkit-submit > button:hover, .signup .formkit-button:hover { background:var(--green-dark) !important; }
.signup .formkit-powered-by-convertkit-container, .signup .formkit-powered-by-convertkit,
.signup .formkit-powered-by, .signup a[data-element="powered-by"] { display:none !important; }
.signup .formkit-alert { border-radius:12px !important; font-size:14px !important; }
@media (min-width:640px) {
  .signup .formkit-fields { flex-direction:row !important; }
  .signup .formkit-field { flex:1 !important; }
  .signup .formkit-submit > button, .signup .formkit-button { white-space:nowrap !important; width:auto !important; }
}

.banner { display:block; width:100%; max-width:420px; height:auto; border-radius:16px; margin:0 auto 22px; }

/* Section heads */
.sechead { display:flex; align-items:baseline; gap:14px; margin:40px 0 6px; flex-wrap:wrap; }
.sechead h2 { font-size:24px; margin:0; color:#1f2937; }
.sechead p { font-size:13.5px; color:var(--soft); margin:0; font-style:italic; }

/* Story grid */
.grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:16px; }
.card { background:#ffffff; border:1px solid var(--border); border-radius:14px;
  padding:20px 22px; display:flex; flex-direction:column; }
.card .tag { margin-bottom:10px; }
.card h3 { font-size:18px; line-height:1.35; margin:0 0 8px; color:#1f2937; }
.card h3 a { color:#1f2937; text-decoration:none; border-bottom:2px solid #d9ead3; }
.card p { font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; }

/* Section tags */
.tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; border-radius:999px; padding:4px 12px; }
.tag-green { background:var(--green-tint); color:var(--green-dark); }
.tag-blue { background:var(--blue-tint); color:#1d4ed8; }
.tag-yellow { background:var(--yellow-tint); color:#7a5c00; }

/* Discovered strip */
.discover { background:var(--yellow-warm); border:2px dashed var(--yellow-line);  border-radius:18px; padding:28px 30px; margin-top:40px; }
.discover h2 { font-size:21px; margin:0 0 8px; color:#1f2937; }
.discover > p { font-size:14.5px; line-height:1.65; color:#3c4a56; margin:0 0 16px; max-width:640px; }
.discover-links { display:grid; grid-template-columns:1fr; gap:12px; }
.discover-links a { display:block; background:#fff; border:1px solid #e3d9b8;
  border-radius:12px; padding:16px 18px; text-decoration:none; }
.discover-links a:hover { border-color:var(--yellow-line); }
.discover-links strong { display:block; color:#1f2937; font-size:16px; margin-bottom:4px; }
.discover-links span { display:block; font-size:13.5px; color:var(--muted); line-height:1.55; }

/* Posts */
.post h1, .wrap > h1 { font-size:28px; line-height:1.3; color:var(--green-dark); margin:0 0 8px; }
.sec-tag { margin:18px 0 12px; }
.dateline { font-size:13px; color:var(--soft); border-top:2px solid #d9ead3;
  border-bottom:2px solid #d9ead3; padding:10px 4px; margin:14px 0 22px; }
.post p { font-size:15.5px; line-height:1.7; color:#33474f; margin:0 0 14px; }
.post p a { color:var(--green); text-decoration:none; border-bottom:1px dotted var(--green); }
.post .why { background:var(--green-tint); border-radius:12px; padding:16px 18px;
  font-size:14.5px; line-height:1.6; color:#2f4a35; }
.post .why strong { color:var(--green-dark); }
.back { margin-top:28px; font-size:14px; }

/* Footer */
footer { max-width:720px; margin:0 auto; padding:8px 18px 60px; text-align:center; }
footer .tagline { font-style:italic; font-size:15px; color:var(--muted); margin:6px 0; }
footer p { font-size:14px; color:var(--soft); margin:6px 0; }
footer a { color:var(--green); text-decoration:none; }

/* Wider screens: two column grids */
@media (min-width:640px) {
  .grid { grid-template-columns:1fr 1fr; }
  .discover-links { grid-template-columns:1fr 1fr; }
}

.carddate { font-size:12px; font-weight:400; color:#6b7280; white-space:nowrap; margin-left:8px; }
.primer { background:#f8faf8; border:2px dashed #22c55e; border-radius:18px; padding:28px 30px; margin-top:40px; }
.primer h2 { font-size:21px; margin:0 0 8px; color:#1f2937; }
.primer > p { font-size:14.5px; line-height:1.65; color:#3c4a56; margin:0 0 16px; max-width:640px; }