/* brain.css — Pick My Brain page. Extracted from inline <style> (CSP: style-src 'self'). */

/* Cool teal-indigo colorscape, distinct from the warm home */
body {
  background:
    radial-gradient(circle at 10% 5%,  rgba(32, 178, 170, 0.10), transparent 28rem),
    radial-gradient(circle at 86% 12%, rgba(72, 100, 180, 0.08), transparent 22rem),
    radial-gradient(circle at 52% 90%, rgba(50,  90, 125, 0.07), transparent 24rem),
    radial-gradient(circle at 72% 55%, rgba(80, 120, 160, 0.06), transparent 18rem),
    linear-gradient(180deg, #10141c 0%, #0d1118 45%, #0b0e14 100%);
  color: #dce8ec;
}

.page::before {
  background:
    radial-gradient(circle at 42% 42%, rgba(32, 178, 170, 0.09), rgba(32, 178, 170, 0) 58%),
    radial-gradient(circle at 60% 30%, rgba(72, 100, 180, 0.06), rgba(72, 100, 180, 0) 62%);
}
.page::after {
  background:
    radial-gradient(circle at 50% 50%, rgba(50, 90, 140, 0.09), rgba(50, 90, 140, 0) 62%),
    radial-gradient(circle at 56% 44%, rgba(32, 178, 170, 0.04), rgba(32, 178, 170, 0) 64%);
}

a { color: #dce8ec; border-bottom-color: rgba(93, 185, 185, 0.22); }
a:hover { color: #edf7f8; border-bottom-color: rgba(93, 185, 185, 0.65); }

/* Layout */
.brain-page {
  position: relative;
  z-index: 1;
  width: min(600px, calc(100% - 3rem));
  margin: 0 auto;
  padding: 5.5rem 0 6rem;
}

.brain-breath {
  display: block;
  font-family: "Tiro Devanagari Sanskrit", serif;
  font-size: 1.2rem;
  color: #7ecfcf;
  opacity: 0.32;
  letter-spacing: 0.08em;
  margin-bottom: 3rem;
}

.brain-framing { margin-bottom: 4rem; }
.brain-framing p {
  font-family: "Spectral", serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 2.2vw, 1.4rem);
  line-height: 1.62;
  color: #d4e8ed;
  margin: 0 0 0.45rem;
}
.brain-framing .aside {
  display: block;
  margin-top: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.72;
  color: rgba(160, 205, 212, 0.48);
  font-style: italic;
}

/* Intake form */
.intake-form { display: flex; flex-direction: column; gap: 2.6rem; }

.intake-label {
  display: block;
  font-family: "Spectral", serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(160, 215, 218, 0.82);
  margin-bottom: 0.65rem;
}
.intake-label .optional { font-style: normal; font-size: 0.8rem; opacity: 0.5; margin-left: 0.25rem; }

.intake-input,
.intake-textarea {
  width: 100%;
  box-sizing: border-box;
  background: rgba(32, 178, 170, 0.03);
  border: 1px solid rgba(93, 185, 185, 0.15);
  border-radius: 3px;
  color: #dce8ec;
  font-family: "Spectral", serif;
  font-size: 1rem;
  line-height: 1.6;
  padding: 0.75rem 0.9rem;
  outline: none;
  transition: border-color 0.25s;
  -webkit-appearance: none;
}
.intake-input::placeholder,
.intake-textarea::placeholder { color: rgba(160, 205, 212, 0.28); }
.intake-input:focus,
.intake-textarea:focus { border-color: rgba(93, 185, 185, 0.4); }
.intake-textarea { resize: vertical; min-height: 96px; }

.intake-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding-top: 0.25rem; }

.intake-submit {
  background: transparent;
  border: 1px solid rgba(93, 185, 185, 0.3);
  border-radius: 3px;
  color: #dce8ec;
  font-family: "Spectral", serif;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  padding: 0.65rem 1.6rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.intake-submit:hover,
.intake-submit:focus {
  background: rgba(93, 185, 185, 0.08);
  border-color: rgba(93, 185, 185, 0.52);
  outline: none;
}

.intake-alt { margin: 0; font-size: 0.85rem; color: rgba(160, 205, 212, 0.48); }

.intake-note {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(93, 185, 185, 0.08);
  font-family: "Spectral", serif;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.72;
  color: rgba(160, 205, 212, 0.36);
  max-width: 400px;
}

@media (max-width: 560px) {
  .brain-page { width: calc(100% - 2rem); padding: 3.5rem 0 4rem; }
  .brain-framing p { font-size: 1.05rem; }
  .intake-form { gap: 2rem; }
}