/* NerdSip Brain Engine — styles for /human-brain/ and /de/menschliches-gehirn/.
   Sits on top of seo-theme.css (papyrus / racing green / gold). */

:root {
  --bm-green: #1B3A25;
  --bm-green-mid: #264F33;
  --bm-green-soft: #E7EEE8;
  --bm-gold: #B8942E;
  --bm-gold-soft: #F5E9C8;
  --bm-gold-ink: #7A6120;
  --bm-paper: #FAF8F2;
  --bm-white: #FFFFFF;
  --bm-border: #E5E1D6;
  --bm-slate: #5A6B5F;
  --bm-red: #A8442E;
  --bm-shadow: 0 1px 2px rgba(27, 58, 37, 0.05), 0 8px 24px rgba(27, 58, 37, 0.08);
  --bm-shadow-lift: 0 2px 4px rgba(27, 58, 37, 0.06), 0 16px 40px rgba(27, 58, 37, 0.12);
}

/* ---------- scaffold ---------- */

.bm-page,
.bm-breadcrumb,
.bm-hero {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.bm-breadcrumb { margin-top: 5.5rem; }
.bm-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  color: var(--bm-slate);
}
.bm-breadcrumb a { color: var(--bm-slate); text-decoration: none; }
.bm-breadcrumb a:hover { color: var(--bm-green); }
.bm-crumb-here { color: var(--bm-gold); }

.bm-hero { margin-top: 1.25rem; }
.bm-hero img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid var(--bm-border);
  box-shadow: var(--bm-shadow);
  display: block;
}

.bm-page { padding-bottom: 4rem; }

.bm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2rem;
  background: var(--bm-gold-soft);
  color: var(--bm-gold-ink);
  border: 1px solid rgba(184, 148, 46, 0.35);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.bm-page h1 {
  font-size: clamp(2.3rem, 6vw, 3.4rem);
  line-height: 1.08;
  margin: 1rem 0 0;
}

.bm-subtitle {
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--bm-slate);
  margin: 1rem 0 0;
  max-width: 46em;
}

.bm-dates {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--bm-slate);
  margin: 1rem 0 0;
}

.bm-direct-answer {
  margin: 1.75rem 0 0;
  padding: 1.25rem 1.4rem;
  background: var(--bm-white);
  border: 1px solid var(--bm-border);
  border-left: 4px solid var(--bm-gold);
  border-radius: 12px;
  box-shadow: var(--bm-shadow);
}
.bm-direct-answer p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--bm-green) !important;
  font-weight: 500;
}

.bm-intro { margin-top: 1.75rem; }
.bm-intro p {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--bm-slate);
  margin: 0 0 1rem;
}

/* ---------- why we care ---------- */

.bm-why {
  margin: 2.5rem 0 0;
  padding: 1.4rem 1.5rem;
  background: var(--bm-white);
  border: 1px solid var(--bm-border);
  border-top: 3px solid var(--bm-gold);
  border-radius: 12px;
  box-shadow: var(--bm-shadow);
}
.bm-why h2 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bm-gold-ink) !important;
  margin: 0 0 0.8rem;
}
.bm-why p {
  margin: 0 0 0.8rem;
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--bm-slate) !important;
}
.bm-why p:last-child { margin-bottom: 0; }
.bm-why strong { color: var(--bm-green); font-weight: 650; }
.bm-why a { color: var(--bm-green-mid); }

/* ---------- table of contents ---------- */

.bm-toc {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.4rem;
  background: var(--bm-green-soft);
  border: 1px solid var(--bm-border);
  border-radius: 12px;
}
.bm-toc h2 {
  font-size: 0.75rem !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bm-slate) !important;
  margin: 0 0 0.75rem;
}
.bm-toc ol {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: 2rem;
}
.bm-toc li { margin: 0 0 0.4rem; font-size: 0.92rem; break-inside: avoid; }
.bm-toc a { color: var(--bm-green-mid); text-decoration: none; }
.bm-toc a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .bm-toc ol { columns: 1; }
}

/* ---------- sections ---------- */

.bm-section { margin-top: 3.5rem; }
.bm-section > h2 {
  font-size: clamp(1.55rem, 3.6vw, 2rem);
  line-height: 1.2;
  margin: 0 0 0.85rem;
  scroll-margin-top: 5rem;
}
.bm-section-lede {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--bm-slate);
  margin: 0 0 1.5rem;
  max-width: 46em;
}

.bm-prose p,
.bm-prose li {
  font-size: 1.03rem;
  line-height: 1.75;
  color: var(--bm-slate);
}
.bm-prose p { margin: 0 0 1.1rem; }
.bm-prose ul { margin: 0 0 1.2rem; padding-left: 1.2rem; }
.bm-prose li { margin: 0 0 0.6rem; }
.bm-prose strong { color: var(--bm-green); font-weight: 650; }

/* ---------- quick answer cards ---------- */

.bm-answer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1rem;
}
.bm-answer-card {
  background: var(--bm-white);
  border: 1px solid var(--bm-border);
  border-radius: 14px;
  padding: 1.2rem 1.25rem;
  box-shadow: var(--bm-shadow);
  display: flex;
  flex-direction: column;
}
.bm-answer-card h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.6rem;
  color: var(--bm-green) !important;
}
.bm-answer-card p {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--bm-slate);
  margin: 0 0 0.9rem;
  flex: 1;
}
.bm-answer-link {
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--bm-gold-ink);
  text-decoration: none;
}
.bm-answer-link:hover { text-decoration: underline; }

/* ---------- brain map ---------- */

.bm-map {
  background: linear-gradient(180deg, #14301E 0%, #1B3A25 55%, #21462B 100%);
  border-radius: 20px;
  border: 1px solid rgba(184, 148, 46, 0.22);
  box-shadow: var(--bm-shadow-lift);
  padding: 1.1rem;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  grid-template-areas:
    "toolbar toolbar"
    "stage readout"
    "chips chips";
  gap: 1rem;
  align-items: start;
}

.bm-map-toolbar {
  grid-area: toolbar;
  display: inline-flex;
  gap: 0.35rem;
  background: rgba(0, 0, 0, 0.22);
  padding: 0.28rem;
  border-radius: 999px;
  justify-self: start;
}
.bm-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.bm-view-btn:hover { color: #fff; }
.bm-view-btn.is-active { background: var(--bm-gold); color: #24200E; }
.bm-view-btn:focus-visible { outline: 2px solid var(--bm-gold-soft); outline-offset: 2px; }

.bm-map-stage { grid-area: stage; position: relative; min-width: 0; }
.bm-svg { width: 100%; height: auto; display: block; overflow: visible; }

.bm-map-hint {
  margin: 0.35rem 0 0;
  text-align: center;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5) !important;
}

/* Region shapes. Every lobe gets its own fill so the map reads as anatomy
   rather than a silhouette, and every lobe strokes its shared boundary in the
   panel background colour, which turns the seams into grooves. */
.bm-region {
  stroke: #14301E;
  stroke-width: 3;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill 0.2s ease, opacity 0.22s ease;
}
.bm-region:focus { outline: none; }
.bm-region:focus-visible { stroke: var(--bm-gold-soft); stroke-width: 3.5; }

.bm-region[data-region="frontal"] { fill: #2A6440; }
.bm-region[data-region="frontal"]:hover { fill: #367B51; }
.bm-region[data-region="parietal"] { fill: #438F60; }
.bm-region[data-region="parietal"]:hover { fill: #51A371; }
.bm-region[data-region="temporal"] { fill: #1F4F34; }
.bm-region[data-region="temporal"]:hover { fill: #2A6543; }
.bm-region[data-region="occipital"] { fill: #5BA97A; }
.bm-region[data-region="occipital"]:hover { fill: #6CBB8B; }
/* The cerebellum sits mostly behind the temporal lobe, so it needs a hue of its
   own rather than another shade of the same green, or it disappears into the
   panel background. */
.bm-region[data-region="cerebellum"] { fill: #2C7E68; }
.bm-region[data-region="cerebellum"]:hover { fill: #35937A; }
.bm-region[data-region="brainstem"] { fill: #35784E; }
.bm-region[data-region="brainstem"]:hover { fill: #418D5D; }

/* Must carry an attribute selector of its own, otherwise the per-region fills
   above out-specify it and the selected lobe never turns gold. */
.bm-region[data-region].is-active { fill: var(--bm-gold); }

.bm-texture path {
  fill: none;
  stroke: rgba(250, 248, 242, 0.16);
  stroke-width: 2.4;
  stroke-linecap: round;
  pointer-events: none;
}

/* deep structures: hidden until the inside view is on */
.bm-deep-layer { opacity: 0; pointer-events: none; transition: opacity 0.28s ease; }
.bm-map.is-deep .bm-deep-layer { opacity: 1; pointer-events: auto; }
.bm-map.is-deep .bm-surface-layer .bm-region { opacity: 0.24; cursor: default; pointer-events: none; }
.bm-map.is-deep .bm-texture path { opacity: 0.25; }

.bm-region.bm-deep { fill: var(--bm-gold-soft); stroke: rgba(27, 58, 37, 0.55); stroke-width: 1.4; }
.bm-region.bm-deep:hover { fill: #FFFFFF; }
.bm-region.bm-deep.is-active { fill: var(--bm-gold); stroke: #FFF6DC; }
.bm-region[data-region="corpus-callosum"] { fill: #E9D9A4; }

/* labels */
.bm-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 650;
  fill: rgba(255, 255, 255, 0.9);
  paint-order: stroke;
  stroke: rgba(20, 48, 30, 0.85);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity 0.24s ease, fill 0.2s ease;
}
.bm-label.is-active { fill: #FFF6DC; }
.bm-deep-label { opacity: 0; fill: #14301E; stroke: rgba(245, 233, 200, 0.95); stroke-width: 4px; font-size: 14px; }
/* Surface labels go fully off in the inside view. At any non-zero opacity they
   sit behind the deep labels and turn the middle of the drawing into mush. */
.bm-map.is-deep .bm-surface-label { opacity: 0; }
.bm-map.is-deep .bm-deep-label { opacity: 1; }

/* readout panel */
.bm-map-readout {
  grid-area: readout;
  background: rgba(250, 248, 242, 0.96);
  border-radius: 14px;
  padding: 1.15rem 1.2rem;
  min-height: 220px;
  border: 1px solid rgba(184, 148, 46, 0.3);
}
.bm-readout-stat {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bm-gold-ink);
  background: var(--bm-gold-soft);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  margin-bottom: 0.6rem;
}
.bm-readout-stat:empty { display: none; }
.bm-readout-name {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 1.3rem;
  line-height: 1.2;
  margin: 0 0 0.3rem;
  color: var(--bm-green) !important;
}
.bm-readout-role {
  margin: 0 0 0.7rem;
  font-size: 0.85rem;
  font-weight: 650;
  color: var(--bm-gold-ink) !important;
}
.bm-readout-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--bm-slate) !important;
}

/* chips: the keyboard and small-screen path into every region */
.bm-chips { grid-area: chips; }
.bm-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bm-chip {
  appearance: none;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.36rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 233, 200, 0.3);
  background: rgba(250, 248, 242, 0.08);
  color: rgba(255, 255, 255, 0.86);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.bm-chip:hover { background: rgba(250, 248, 242, 0.18); color: #fff; }
.bm-chip.is-active { background: var(--bm-gold); border-color: var(--bm-gold); color: #24200E; }
.bm-chip:focus-visible { outline: 2px solid var(--bm-gold-soft); outline-offset: 2px; }

@media (max-width: 780px) {
  .bm-map {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "toolbar"
      "stage"
      "readout"
      "chips";
  }
  .bm-map-readout { min-height: 0; }
  .bm-label { font-size: 19px; stroke-width: 4.5px; }
  .bm-deep-label { font-size: 17px; }
}

/* ---------- facts ---------- */

.bm-fact-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1rem;
}
.bm-fact {
  position: relative;
  background: var(--bm-white);
  border: 1px solid var(--bm-border);
  border-radius: 14px;
  padding: 1.6rem 1.25rem 1.15rem;
  box-shadow: var(--bm-shadow);
}
.bm-fact-n {
  position: absolute;
  top: 0.85rem;
  right: 1.1rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--bm-gold);
  opacity: 0.42;
}
.bm-fact h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.55rem;
  padding-right: 2rem;
  color: var(--bm-green) !important;
}
.bm-fact p {
  font-size: 0.92rem;
  line-height: 1.62;
  color: var(--bm-slate);
  margin: 0 0 0.75rem;
}
.bm-fact cite {
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bm-gold-ink);
}

/* ---------- key numbers table ---------- */

/* Wide content must scroll inside its own box, never the page body. */
.bm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--bm-border);
  border-radius: 12px;
  background: var(--bm-white);
  box-shadow: var(--bm-shadow);
}
.bm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  min-width: 34rem;
}
.bm-table thead th {
  text-align: left;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bm-gold-ink);
  background: var(--bm-gold-soft);
  padding: 0.7rem 1rem;
  white-space: nowrap;
}
.bm-table tbody th {
  text-align: left;
  font-weight: 650;
  color: var(--bm-green);
  padding: 0.7rem 1rem;
  vertical-align: top;
}
.bm-table tbody td {
  padding: 0.7rem 1rem;
  color: var(--bm-slate);
  vertical-align: top;
}
.bm-table tbody td:last-child {
  font-size: 0.82rem;
  color: var(--bm-slate);
  opacity: 0.85;
  white-space: nowrap;
}
.bm-table tbody tr + tr th,
.bm-table tbody tr + tr td { border-top: 1px solid var(--bm-border); }
.bm-table tbody tr:nth-child(even) { background: rgba(231, 238, 232, 0.4); }

/* ---------- myths ---------- */

.bm-myth-list { display: grid; gap: 0.9rem; }
.bm-myth {
  background: var(--bm-white);
  border: 1px solid var(--bm-border);
  border-left: 4px solid var(--bm-red);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.bm-myth-claim {
  margin: 0 0 0.55rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--bm-green) !important;
  display: flex;
  gap: 0.55rem;
  align-items: baseline;
}
.bm-myth-tag { color: var(--bm-red); font-weight: 800; }
.bm-myth-truth {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--bm-slate) !important;
}

/* ---------- timeline ---------- */

.bm-timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 1.6rem;
  border-left: 2px solid var(--bm-border);
  display: grid;
  gap: 1.5rem;
}
.bm-tl-step { position: relative; }
.bm-tl-step::before {
  content: "";
  position: absolute;
  left: calc(-1.6rem - 7px);
  top: 0.35rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bm-gold);
  border: 2px solid var(--bm-paper);
}
.bm-tl-age {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bm-gold-ink);
  margin-bottom: 0.25rem;
}
.bm-tl-step h3 {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: var(--bm-green) !important;
}
.bm-tl-step p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--bm-slate);
}

/* ---------- faq ---------- */

.bm-faq { display: grid; gap: 0.5rem; }
.bm-faq details {
  background: var(--bm-white);
  border: 1px solid var(--bm-border);
  border-radius: 12px;
  padding: 0.9rem 1.15rem;
}
.bm-faq summary {
  cursor: pointer;
  font-weight: 650;
  font-size: 0.98rem;
  color: var(--bm-green);
  list-style: none;
  position: relative;
  padding-right: 1.75rem;
}
.bm-faq summary::-webkit-details-marker { display: none; }
.bm-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -0.1rem;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--bm-gold);
}
.bm-faq details[open] summary::after { content: "−"; }
.bm-faq p {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.68;
  color: var(--bm-slate);
}

/* ---------- courses + related ---------- */

.bm-course-grid,
.bm-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 0.9rem;
}
.bm-course-card,
.bm-related-card {
  display: block;
  background: var(--bm-white);
  border: 1px solid var(--bm-border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  box-shadow: var(--bm-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.bm-course-card:hover,
.bm-related-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--bm-shadow-lift);
  border-color: rgba(184, 148, 46, 0.5);
}
.bm-course-card h3,
.bm-related-card strong {
  display: block;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--bm-green) !important;
}
.bm-course-card p,
.bm-related-card span {
  display: block;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--bm-slate) !important;
}
.bm-course-all { margin: 1.1rem 0 0; font-size: 0.9rem; font-weight: 650; }
.bm-course-all a { color: var(--bm-gold-ink); text-decoration: none; }
.bm-course-all a:hover { text-decoration: underline; }

/* ---------- cta ---------- */

.bm-cta {
  background: linear-gradient(140deg, var(--bm-green) 0%, var(--bm-green-mid) 100%);
  border-radius: 18px;
  padding: 2.1rem 1.8rem;
  text-align: center;
  box-shadow: var(--bm-shadow-lift);
}
.bm-cta h2 {
  color: #FFFFFF !important;
  font-size: clamp(1.4rem, 3.4vw, 1.85rem);
  margin: 0 0 0.7rem;
}
.bm-cta p {
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0 auto 1.4rem;
  max-width: 38em;
}
.bm-cta-btn {
  display: inline-block;
  background: var(--bm-gold);
  color: #24200E;
  font-weight: 750;
  font-size: 0.95rem;
  padding: 0.85rem 1.8rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.16s ease, filter 0.16s ease;
}
.bm-cta-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* ---------- sources ---------- */

.bm-sources ol {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: 0.55rem;
}
.bm-sources li { font-size: 0.87rem; line-height: 1.55; color: var(--bm-slate); }
.bm-sources a { color: var(--bm-green-mid); }
.bm-src-note { color: var(--bm-slate); opacity: 0.8; }
.bm-review-note {
  margin: 1.4rem 0 0;
  padding: 0.95rem 1.15rem;
  background: var(--bm-green-soft);
  border-radius: 12px;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--bm-slate);
}

@media (prefers-reduced-motion: reduce) {
  .bm-region,
  .bm-label,
  .bm-deep-layer,
  .bm-course-card,
  .bm-related-card,
  .bm-cta-btn { transition: none; }
}