/* ── MANIFESTO PAGE ── */
#page-about {
  padding: 0 3rem 2.4rem;
}

#page-about .subpage-bg {
  position: fixed;
}

#page-about .breadcrumb {
  position: absolute;
  top: 1.8rem;
  left: 3rem;
  z-index: 5;
  visibility: hidden;
  opacity: 0;
}

#page-about .subpage-bg-img {
  opacity: 0;
  object-position: center 55%;
  transition: opacity 1.8s ease;
}

#page-about .subpage-bg-img.revealed {
  opacity: 0.38;
}

/* globalTopBtn sits fixed at bottom: 2rem; on the short manifesto page it lands at
   the same y-level as the footer copyright when scrolled to bottom — suppress it */
#page-about.active ~ #globalTopBtn {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── TOP SECTION: map + experience ── */
.mfst-top {
  display: grid;
  grid-template-columns: 55fr 45fr;
}

.mfst-map-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5rem 2.5rem 2rem 0;
}

#mfst-map-container {
  width: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#mfst-map-container.loaded {
  opacity: 1;
}

#mfst-map-container svg {
  width: 100%;
  height: auto;
  display: block;
}

.mfst-exp-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 5rem 0 2rem 2.5rem;
  font-family: 'DM Mono', monospace;
  font-size: 0.84rem;
  line-height: 1.9;
}

.mfst-exp-panel .mfst-comment,
.mfst-exp-panel .mfst-str { filter: brightness(1.3); }

/* ── BOTTOM SECTION: principles ── */
.mfst-bottom {
  padding: 6.8rem 0 0;
  font-family: 'DM Mono', monospace;
  font-size: 0.84rem;
  line-height: 1.9;
  opacity: 0.31;
}

.mfst-principles-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5rem;
}

/* ── TERMINAL BLOCK ── */
.mfst-block {
  margin-bottom: 2rem;
}

/* ── LINES ── */
.mfst-line {
  display: none;
  white-space: pre-wrap;
}

.mfst-line.visible {
  display: block;
  animation: mfst-appear 0.32s ease-out forwards;
}

@keyframes mfst-appear {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: translateY(0); }
}

.mfst-indent {
  padding-left: 2ch;
}

/* ── SYNTAX COLORS ── */
.mfst-comment { color: var(--accent); }
.mfst-punct   { color: rgba(var(--cream-rgb), 0.42); }
.mfst-id      { color: var(--cream); }
.mfst-str     { color: var(--warm-mid); }
/* ── CODE NAV LINKS ── */
.mfst-nav-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.mfst-nav-link:hover {
  border-bottom-color: currentColor;
  opacity: 0.75;
}

/* ── MAP SVG CLASSES ── */
.abt-land {
  fill: var(--warm-mid);
  fill-opacity: 0.28;
}

.abt-path-out {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.abt-path-return {
  fill: none;
  stroke: var(--warm-mid);
  stroke-width: 0.8;
  stroke-linecap: round;
  opacity: 0.5;
}

.abt-node-major {
  fill: var(--cream);
  stroke: none;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .mfst-top {
    grid-template-columns: 1fr 1fr;
  }
  .mfst-principles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .mfst-top {
    grid-template-columns: 1fr;
    height: auto;
    overflow: visible;
  }
  .mfst-map-panel {
    padding: 4rem 0 2rem;
  }
  .mfst-exp-panel {
    padding: 2rem 0 3rem;
  }
  .mfst-principles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #page-about { padding: 0 1.5rem 2.4rem; }
  .mfst-bottom { padding: 2rem 0; }
}

@media (max-width: 520px) {
  #page-about { padding: 0 1.2rem 2rem; }
}

@media (max-width: 600px) {
  .mfst-principles-grid {
    grid-template-columns: 1fr;
  }
}