/* brain-closeup: the brain plate. Brain left, thought stream right; stacked on narrow screens.
   The .thinking grid is a zero-specificity fallback; a shared rule in base.css (or thoughts.css) wins. */
:where(.thinking) {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}
@media (max-width: 900px) { :where(.thinking) { grid-template-columns: minmax(0, 1fr); } }

/* the plate hangs from the top of its row (level with the thought stream's header), so its height,
   which JS fits to the viewport, never pushes it further down */
.bc { position: relative; min-width: 0; align-self: start; }
.bc__fig { margin: 0; }
.bc__stage { position: relative; width: 100%; height: 480px; touch-action: pan-y; }
/* JS sizes the canvas a little past the stage (ink specks drift out of the plate); the stage takes the pointer */
.bc__canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.bc__measure { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }
.bc__measure .bc__lobe { will-change: auto; }

/* lobe labels: an anatomical plate, read live */
.bc__lobe {
  --a: 0;
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: baseline; gap: 7px;
  margin: 0; padding: 5px 6px; border: 0; background: none;
  color: var(--fg);
  font: inherit; line-height: 1; white-space: nowrap; cursor: pointer;
  will-change: transform;
  transition: color .7s var(--ease-out), opacity .6s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.bc__lobe[data-side="top"] { translate: -50% -100%; }
.bc__lobe[data-side="bottom"] { translate: -50% 0; }
.bc__lobe[data-side="right"] { translate: 0 -50%; }
.bc__lobe:focus-visible { outline: 2px dashed currentColor; outline-offset: 2px; }
.bc__lobe-name {
  font-family: var(--serif); font-style: italic; font-size: 21px; letter-spacing: -0.01em;
  font-weight: calc(380 + var(--a) * 380);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  transition: font-weight .8s var(--ease-out);
  transform-origin: 50% 70%;
}
.bc__lobe-val {
  font-family: var(--mono); font-size: 11px; opacity: .72;
  font-variant-numeric: tabular-nums;
}
.bc__lobe.is-lit, .bc__lobe.is-hover { color: var(--cream); }
.bc__lobe.is-hover .bc__lobe-name { font-weight: 720; }
.bc.has-hover .bc__lobe:not(.is-hover) { opacity: .4; }
.bc.is-swapping .bc__lobe { opacity: .28; }
.bc__lobe.is-ping .bc__lobe-name { animation: bc-ping .8s var(--ease-jelly); }
@keyframes bc-ping {
  0% { transform: scale(1); }
  30% { transform: scale(1.16) rotate(-2deg); }
  100% { transform: scale(1); }
}

/* caption under the plate */
.bc__cap { display: grid; gap: 8px; max-width: 32em; margin: 14px 0 0; min-height: 5.4em; }
.bc__cap-fig { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; opacity: .78; }
.bc__cap-say {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px); line-height: 1.34; letter-spacing: -0.005em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.bc__cap-say.is-quote { font-weight: 480; }
.bc__cap-say span {
  display: inline-block; white-space: pre;
  opacity: 0; filter: blur(5px); transform: translateY(5px);
  transition: opacity .5s var(--ease-out), filter .7s var(--ease-out), transform .7s var(--ease-jelly);
}
.bc__cap-say span.is-in { opacity: 1; filter: blur(0); transform: none; }

/* the version stamp, printed in cream */
.bc__stamp {
  position: absolute; left: 0; top: 0; width: 112px;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-9deg);
  opacity: .95;
  transition: opacity .5s var(--ease-out), transform .8s var(--ease-sink);
}
.bc__stamp svg { display: block; width: 100%; height: auto; overflow: visible; }
.bc__stamp-v {
  font-family: var(--serif); font-size: 42px; font-weight: 800; letter-spacing: -0.04em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
}
.bc__stamp-k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; }
.bc__stamp.is-lift { opacity: 0; transform: translate(-50%, -80%) rotate(-3deg) scale(1.12); }
/* two names for one thump: swapping the name restarts it without forcing a reflow */
.bc__stamp.is-thump { animation: bc-thump .8s var(--ease-jelly) both; }
.bc__stamp.is-thump2 { animation: bc-thump2 .8s var(--ease-jelly) both; }
@keyframes bc-thump {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(2); }
  42% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(.88); }
  100% { opacity: .95; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
}
@keyframes bc-thump2 {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(2); }
  42% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg) scale(.88); }
  100% { opacity: .95; transform: translate(-50%, -50%) rotate(-9deg) scale(1); }
}

/* narrow: labels sit in two rows above and below, name over value */
.bc__stage.is-narrow .bc__lobe { flex-direction: column; align-items: center; gap: 3px; padding: 4px 3px; }
.bc__stage.is-narrow .bc__lobe-name { font-size: 16px; }
.bc__stage.is-narrow .bc__lobe-val { font-size: 10px; }
.bc__stage.is-narrow .bc__stamp { width: 80px; }
@media (max-width: 720px) {
  .bc__cap { min-height: 6.4em; }
  .bc__cap-say { font-size: 18px; }
}