/* ============================================================
   The Becoming Counseling — thebecomingcounseling.com
   Vintage-orchard editorial: warm ivory, forest green, terracotta,
   olive. Flat color, hairline rules, no cartoon shadows, almost no
   animation. If Anthropologie had a therapy page.
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-latin-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('/fonts/fraunces-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('/fonts/karla-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('/fonts/karla-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Karla'; src: url('/fonts/karla-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Reenie Beanie'; src: url('/fonts/reenie-beanie-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }

/* ---------- Tokens: the orchard ---------- */
:root {
  --ivory: #FAF6EC;         /* page ground, warm ivory like the fabric */
  --cream: #F2ECDB;         /* panels */
  --ink: #33302A;           /* warm espresso ink */
  --forest: #2E5B3C;        /* grounded green (the kelly, grown up) */
  --forest-deep: #234830;
  --olive: #7C7B48;
  --sage: #A9AC7E;
  --terracotta: #B2603F;
  --apricot: #DFA076;
  --blush: #E5BDC1;
  --citron: #C9C45E;
  --hairline: rgba(51, 48, 42, 0.25);

  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --sans: 'Karla', 'Gill Sans', 'Segoe UI', sans-serif;
  --script: 'Reenie Beanie', 'Segoe Print', cursive;

  --measure: 38rem;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.14; margin: 0 0 1rem; letter-spacing: 0.005em; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.7rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1rem; }
a { color: var(--forest); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--terracotta); }
::selection { background: var(--blush); color: var(--ink); }
img, svg { max-width: 100%; }

.kicker {
  font-family: var(--sans); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.3em;
  color: var(--terracotta); margin-bottom: 1rem;
}
.kicker-center { text-align: center; }
.script-accent { font-family: var(--script); font-size: 2.1em; line-height: 1; color: var(--forest); }
.script-accent-light { font-family: var(--script); font-size: 1.9em; color: var(--sage); }
.nowrap { white-space: nowrap; }

/* ---------- Buttons: quiet, tailored ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans); font-weight: 700; font-size: 0.82rem;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--ivory); background: var(--forest);
  padding: 0.95rem 1.9rem; border: 0; border-radius: 999px;
  text-decoration: none; cursor: pointer;
  transition: background 160ms ease;
}
.btn:hover { background: var(--forest-deep); color: var(--ivory); }
.btn-small { font-size: 0.72rem; padding: 0.7rem 1.35rem; }
.btn-submit { }
.link-plain { font-weight: 700; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem var(--pad);
  background: var(--ivory);
  border-bottom: 1px solid var(--hairline);
}
.wordmark { display: flex; align-items: baseline; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.wordmark-script { font-family: var(--script); font-size: 1.95rem; color: var(--forest); line-height: 1; }
.wordmark-caps { font-family: var(--sans); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink); }

/* ---------- Hero: the wallpaper ---------- */
.hero {
  position: relative;
  padding: clamp(4.5rem, 11vw, 8.5rem) var(--pad) clamp(4rem, 9vw, 7rem);
  display: grid; place-items: center; min-height: 72vh;
  background: var(--ivory);
}
.hero-inner { max-width: 72rem; margin: 0 auto; position: relative; z-index: 2; text-align: center; }
.hero-script { font-family: var(--script); font-size: clamp(2rem, 4vw, 2.9rem); color: var(--terracotta); margin: 0 0 0.5rem; line-height: 1; }
.hero-title {
  font-size: clamp(2.7rem, 6.6vw, 5rem);
  max-width: 17ch;
  margin: 0 auto 1.6rem;
  color: var(--ink);
}
.hero-title .accent { font-style: italic; color: var(--forest); }
.hero-cta { display: flex; justify-content: center; margin-top: 2.2rem; }
.hero-butterflies { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.hero-butterflies .bf { position: absolute; }

/* ---------- Posters + intro ---------- */
.gallery { padding: clamp(3rem, 7vw, 5rem) var(--pad) clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--hairline); background: var(--cream); }
.poster-row {
  max-width: 68rem; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
}
.poster {
  background: var(--ivory);
  border: 1px solid var(--hairline);
  padding: 7%;
}
.poster svg { display: block; width: 100%; height: auto; }
.poster:nth-child(2) { transform: translateY(0.9rem); }
.poster:nth-child(4) { transform: translateY(0.6rem); }
.gallery-intro {
  max-width: 42rem; margin: clamp(2.75rem, 6vw, 4rem) auto 0;
  text-align: center;
  font-family: var(--serif); font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.65;
}

/* ---------- Contact + butterfly curtain ---------- */
.contact { position: relative; padding: clamp(4.5rem, 10vw, 8rem) var(--pad); overflow: hidden; border-top: 1px solid var(--hairline); }
.contact-inner { max-width: 44rem; margin: 0 auto; position: relative; z-index: 1; }
.contact-title { text-align: center; font-size: clamp(2.2rem, 5vw, 3.3rem); }
.contact-lede { text-align: center; max-width: 34rem; margin: 0 auto 2.5rem; }
.contact-form { display: grid; gap: 1.2rem; }
.field { display: grid; gap: 0.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.field label { font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.18em; }
.field .optional { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--olive); }
.field input, .field textarea {
  font: inherit; color: var(--ink);
  background: #FFFDF6; border: 1px solid var(--hairline); border-radius: 2px;
  padding: 0.85rem 1rem; width: 100%;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 1px var(--forest); }
.field input::placeholder, .field textarea::placeholder { color: rgba(51,48,42,0.45); }
.field textarea { resize: vertical; min-height: 8rem; }
.hp { position: absolute; left: -9999px; opacity: 0; }
.btn-submit { justify-self: center; }
.form-status { font-weight: 700; min-height: 1.5rem; margin: 0; text-align: center; }
.form-status.ok { color: var(--forest); }
.form-status.err { color: var(--terracotta); }
.form-fineprint { font-size: 0.9rem; color: var(--ink); opacity: 0.8; margin-top: 0.25rem; text-align: center; }
.butterfly-curtain { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.butterfly-curtain .bf { position: absolute; will-change: transform, opacity; backface-visibility: hidden; }

/* ---------- Butterflies ---------- */
.bf { width: var(--size, 80px); height: auto; }
.bf svg { display: block; width: 100%; height: auto; overflow: visible; }
.bf .wing-l { animation: flap var(--flap, 2000ms) ease-in-out infinite alternate; transform-origin: 50px 50px; }
.bf .wing-r { animation: flap var(--flap, 2000ms) ease-in-out infinite alternate; transform-origin: 50px 50px; }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(0.92); } }
@media (prefers-reduced-motion: reduce) {
  .bf .wing-l, .bf .wing-r { animation: none; }
}

/* ---------- FAQ ---------- */
.faq { background: var(--ivory); padding: clamp(3.5rem, 8vw, 6rem) var(--pad) clamp(4rem, 9vw, 7rem); border-top: 1px solid var(--hairline); }
.faq-inner { max-width: 46rem; margin: 0 auto; }
.faq-list { margin-top: 2rem; border-top: 1px solid var(--hairline); }
.faq-list details { border-bottom: 1px solid var(--hairline); }
.faq-list summary {
  cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 400; font-size: 1.18rem;
  padding: 1.15rem 2.6rem 1.15rem 0; position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: '+'; position: absolute; right: 0.4rem; top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif); font-weight: 400; font-size: 1.5rem;
  color: var(--terracotta);
}
.faq-list details[open] summary::after { content: '\2013'; }
.faq-list summary:hover { color: var(--forest); }
.faq-a { padding: 0 0 1.3rem; max-width: 42rem; }
.faq-cta { margin-top: 2rem; font-size: 1.02rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--forest-deep); color: var(--cream); padding: clamp(2.75rem, 6vw, 4.5rem) var(--pad); }
.footer-inner { max-width: 72rem; margin: 0 auto; display: grid; gap: 0.45rem; }
.footer-wordmark .wordmark-script { color: var(--sage); font-size: 2.3rem; }
.footer-wordmark .wordmark-caps { color: var(--cream); }
.footer-cred { font-size: 0.95rem; }
.footer-contact a { color: var(--blush); }
.footer-contact a:hover { color: #fff; }
.footer-crisis { font-size: 0.88rem; opacity: 0.85; max-width: 40rem; }
.footer-copy { font-size: 0.88rem; margin-top: 0.9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .poster-row { grid-template-columns: 1fr 1fr; max-width: 34rem; }
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .wordmark-caps { display: none; }
  .br-desktop { display: none; }
}