/* ============================================================
   Fireweed Planning Studio — shared design system
   "Renewal after fire" — char ink, warm paper, fireweed bloom
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Spline+Sans:wght@400;500;600;700&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root {
  /* renewal-after-fire palette */
  --paper:      #F5EFE4;   /* warm paper */
  --paper-2:    #EFE7D7;   /* recessed paper */
  --card:       #FBF7EF;   /* raised card */
  --ink:        #211D18;   /* char */
  --ink-soft:   #5A5247;   /* muted char */
  --line:       #DBD0BC;   /* hairline */

  --bloom:      #C9286B;   /* fireweed magenta */
  --bloom-2:    #E8447F;   /* bright bloom */
  --bloom-wash: #F6DCE7;   /* magenta tint */

  --sage:       #3E7C5A;   /* safe / guaranteed / growth-good */
  --sage-wash:  #DCE8DE;
  --ember:      #C2410C;   /* depletion / risk / spill */
  --ember-wash: #F4DCC9;
  --gold:       #B07D2B;   /* contributions / accent 2 */

  --shadow-sm: 0 1px 2px rgba(33,29,24,.06), 0 2px 6px rgba(33,29,24,.05);
  --shadow-md: 0 6px 18px rgba(33,29,24,.10), 0 2px 5px rgba(33,29,24,.06);
  --shadow-lg: 0 24px 60px rgba(33,29,24,.16), 0 6px 16px rgba(33,29,24,.08);

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Spline Sans', system-ui, sans-serif;
  background:
    radial-gradient(1100px 600px at 88% -10%, var(--bloom-wash) 0%, transparent 55%),
    radial-gradient(900px 700px at -10% 110%, var(--sage-wash) 0%, transparent 50%),
    var(--paper);
  color: var(--ink);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* subtle paper grain */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 38px clamp(18px, 4vw, 56px) 80px; }

/* ---- type ---- */
.kicker {
  font-family: 'Spline Sans Mono', monospace;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--bloom); font-weight: 500;
}
h1 {
  font-family: 'Fraunces', serif; font-weight: 600;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.02;
  letter-spacing: -.015em; margin: 10px 0 14px;
}
h1 em { font-style: italic; color: var(--bloom); }
h2 { font-family: 'Fraunces', serif; font-weight: 600; font-size: 22px; letter-spacing: -.01em; }
.lede { font-size: clamp(15px, 1.7vw, 18px); color: var(--ink-soft); max-width: 60ch; }
.mono { font-family: 'Spline Sans Mono', monospace; font-variant-numeric: tabular-nums; }

/* ---- top bar ---- */
.topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; flex-wrap: wrap; }
.mark { width: 30px; height: 30px; flex: 0 0 auto; }
.brandname { font-family: 'Fraunces', serif; font-weight: 600; font-size: 17px; letter-spacing: -.01em; }
.brandname span { color: var(--ink-soft); font-weight: 400; }

/* real Fireweed wordmark + studio label */
.ps-logo { display: inline-flex; align-items: center; text-decoration: none; }
.ps-logo img { height: 30px; width: auto; display: block; }
.ps-divider { width: 1px; height: 26px; background: var(--line); flex: 0 0 auto; }
.studio-label {
  font-family: 'Spline Sans Mono', monospace; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-soft);
}
.topbar-spacer { margin-left: auto; }

.backlink {
  font-family: 'Spline Sans Mono', monospace; font-size: 12px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
  text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px;
  transition: color .2s, border-color .2s;
}
.backlink:hover { color: var(--bloom); border-color: var(--bloom); }

/* Book-a-call CTA */
.cta-book {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Spline Sans', sans-serif; font-size: 13px; font-weight: 600;
  background: var(--bloom); color: #fff; text-decoration: none;
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--bloom);
  box-shadow: var(--shadow-sm); transition: transform .12s, box-shadow .2s, filter .2s;
}
.cta-book:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
.cta-book.ghost { background: transparent; color: var(--bloom); }
.cta-book.ghost:hover { background: var(--bloom-wash); }

/* closing CTA band on each tool */
.cta-band {
  margin-top: 40px; padding: 30px clamp(20px, 4vw, 44px); border-radius: var(--r-lg);
  background: linear-gradient(120deg, var(--card), var(--bloom-wash));
  border: 1px solid var(--line); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
}
.cta-band .cta-band-copy h3 { font-family: 'Fraunces', serif; font-weight: 600; font-size: clamp(20px, 2.4vw, 27px); letter-spacing: -.01em; max-width: 24ch; }
.cta-band .cta-band-copy p { font-size: 14px; color: var(--ink-soft); margin-top: 6px; max-width: 46ch; }
.cta-band .cta-book { font-size: 15px; padding: 13px 26px; flex: 0 0 auto; }

/* footer + disclosure */
.ps-footer {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px;
}
.ps-footer-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ps-footer-row a { color: var(--ink-soft); text-decoration: none; font-size: 13px; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.ps-footer-row a:hover { color: var(--bloom); border-color: var(--bloom); }
.ps-disclosure { font-size: 11px; line-height: 1.5; color: var(--ink-soft); max-width: 92ch; }

/* ---- cards / panels ---- */
.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-md);
}
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Spline Sans Mono', monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft);
  background: var(--paper-2); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px;
}
.tag.bloom { color: var(--bloom); background: var(--bloom-wash); border-color: transparent; }
.tag.sage  { color: var(--sage);  background: var(--sage-wash);  border-color: transparent; }
.tag.ember { color: var(--ember); background: var(--ember-wash); border-color: transparent; }

/* ---- controls ---- */
.control { margin-bottom: 22px; }
.control:last-child { margin-bottom: 0; }
.control label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-bottom: 10px;
}
.control label .val {
  font-family: 'Spline Sans Mono', monospace; font-size: 16px;
  font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums;
}

input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: linear-gradient(90deg, var(--bloom) var(--fill,50%), var(--paper-2) var(--fill,50%));
  border-radius: 999px; outline: none; cursor: pointer; border: 1px solid var(--line);
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--card); border: 2.5px solid var(--bloom);
  box-shadow: var(--shadow-sm); cursor: grab; transition: transform .12s, box-shadow .12s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
input[type=range]::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(.96); }
input[type=range]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--card); border: 2.5px solid var(--bloom); cursor: grab;
}

.seg { display: inline-flex; background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button {
  font-family: 'Spline Sans', sans-serif; font-size: 13px; font-weight: 600;
  border: none; background: transparent; color: var(--ink-soft);
  padding: 7px 16px; border-radius: 999px; cursor: pointer; transition: all .18s;
}
.seg button.on { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-sm); }

.btn {
  font-family: 'Spline Sans', sans-serif; font-size: 14px; font-weight: 600;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 12px 22px; border-radius: 999px; cursor: pointer;
  transition: transform .12s, box-shadow .2s, background .2s; box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn.bloom { background: var(--bloom); border-color: var(--bloom); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--paper-2); }

/* ---- big readout ---- */
.readout { font-family: 'Fraunces', serif; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -.02em; line-height: 1; }

/* ---- entrance ---- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}