/* Design sandbox batch B. Existing brand tokens, words and art retained. */
/* 6. One intentional desktop navigation row; progressive mobile fallback. */
.nav-links { display: none; gap: 20px; flex-wrap: nowrap; }
.nav-link { font-size: 14px; font-weight: 500; line-height: 1.4; text-transform: none; padding-block: 8px; }
.nav-link[aria-current="page"], #nav-panel a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--cf-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav-toggle { display: inline-flex; }
#nav-panel a { min-height: 48px; font-size: 16px; line-height: 1.5; }
#nav-panel ul { gap: 4px; }
@media (max-width: 1099px) {
  #nav-panel.is-open, html:not(.js) #nav-panel { display: block !important; }
  html:not(.js) .nav-toggle { display: none; }
}
@media (min-width: 1100px) {
  .nav-links { display: flex; }
  .nav-toggle { display: none; }
  #nav-panel.is-open { display: none !important; }
}

/* 7. Consistent active actions; the former dead button is only a status line. */
.button-primary, .button-secondary {
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 12px;
  font: 600 14px/1.4 var(--cf-font-body);
}
.closing-actions, .design-eli5 .closing-actions { flex-wrap: wrap; gap: 12px; }
.cf-named-pair > .cf-named .cf-named__action { padding-top: 24px; gap: 12px; }
.button-status { display: block; margin-top: 8px; font: 400 14px/1.5 var(--cf-font-body); color: var(--cf-text-muted); }
@media (min-width: 768px) {
  .cf-named-pair > .cf-named .cf-named__action { align-items: flex-start; }
}
@media (max-width: 639px) {
  .closing-actions { flex-direction: column; align-items: stretch; }
  .closing-actions > :is(.button-primary, .button-secondary) { width: 100%; }
}

/* 8. A brand column and two source-order link columns, not a link spill. */
.site-footer { padding-block: 64px 32px; }
.footer-row { display: grid; grid-template-columns: 224px minmax(0, 1fr); align-items: start; gap: 48px; margin-bottom: 32px; }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.footer-nav__column { display: grid; align-content: start; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; font-weight: 500; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.footer-disclaimer { font-size: 14px; font-weight: 400; line-height: 1.6; }
@media (max-width: 767px) {
  .footer-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 639px) {
  .site-footer { padding-block: 40px 24px; }
  .footer-nav { gap: 24px; }
}

/* 9. Sticky grid item, native disclosure, and live location marker. */
main[id], main [id] { scroll-margin-top: 96px; }
.science-shell .toc-rail { position: static; margin: 0; }
.science-toc__disclosure summary { min-height: 48px; padding: 12px 16px; font-size: 16px; font-weight: 500; cursor: pointer; color: var(--cf-text-soft); }
.science-toc__disclosure { border: 1px solid var(--cf-line-strong); border-radius: 12px; margin-bottom: 32px; }
.science-toc__disclosure .toc-rail { padding: 8px 16px 16px; }
.toc-rail a { border-left: 2px solid transparent; padding: 8px 0 8px 12px; font-size: 14px; font-weight: 500; line-height: 1.45; }
.toc-rail a[aria-current="true"] { border-left-color: var(--cf-accent); color: var(--cf-accent); }
@media (min-width: 1024px) {
  .science-shell > .science-toc { position: sticky; top: 96px; align-self: start; }
  .science-toc__disclosure { border: 0; margin: 0; }
  .science-toc__disclosure summary { display: none; }
  .science-toc__disclosure .toc-rail { padding: 0; }
}
@media (max-width: 1023px) {
  main[id], main [id] { scroll-margin-top: 92px; }
  .toc-rail a { min-height: 44px; }
}

/* Screenshot follow-ups: no orphan rail labels or accidental half-width quote. */
@media (min-width: 768px) {
  .design-founder #background .cf-bio { max-width: 832px; }
  .design-founder #background .card { grid-template-columns: 192px minmax(0, 608px); }
  .design-founder #background .card-kicker { white-space: nowrap; letter-spacing: 0.04em; }
}
.design-founder #principles .cf-quote {
  width: 100%; max-width: 760px; margin: 32px auto 0;
  font-family: var(--cf-font-display); font-size: 32px; font-weight: 500; line-height: 1.3;
}
.design-overview__node { display: flex; align-items: center; justify-content: center; gap: 4px; padding-inline: 12px; white-space: nowrap; }
@media (max-width: 639px) {
  .design-founder #principles .cf-quote { font-size: 28px; }
}

/* Motion is opt-in only after observers install. A failed/absent script hides nothing. */
html .cm-reveal, html .cm-map__node, html .cm-map__link { opacity: 1; transform: none; will-change: auto; }
html .cm-reveal { transition: opacity 400ms ease-out, transform 400ms ease-out; transition-delay: var(--design-delay, 0ms); }
html.motion-ready .cm-reveal:not(.is-in) { opacity: 0; transform: translateY(14px); }
/* Opening content and actions must NEVER wait for an observer or stagger. */
html .hero .cm-reveal, html.motion-ready .hero .cm-reveal {
  opacity: 1; transform: none; transition: none; transition-delay: 0ms; animation: none;
}
html .cm-map__node { transition: opacity 400ms ease-out, transform 400ms ease-out; }
html .cm-map__node.is-lit { box-shadow: none; }
html .cm-ping-soft { animation: none; }
@keyframes design-logo-ping {
  0% { opacity: 0.3; transform: scale(0.6); }
  55% { opacity: 1; transform: scale(1.35); }
  100% { opacity: 0.8; transform: scale(1); }
}
html.motion-ready .cm-ping-soft { animation: design-logo-ping 600ms ease-out 1 both; }
html .cm-glow-btn, html .cm-glow-btn.is-in,
html .cm-reveal.is-in > .cm-glow-btn { animation: none; }
html :is(.button-primary, .button-secondary, .cm-glow-btn) {
  transition: transform 220ms ease-out, opacity 220ms ease-out;
}
html :is(.button-primary, .button-secondary):hover {
  transform: translateY(-2px); opacity: 0.96; filter: none; box-shadow: none;
}
html :is(.button-primary, .button-secondary):active { transform: scale(0.98); opacity: 0.92; }
html .cm-next, html .cm-next::after { transition: transform 220ms ease-out, opacity 220ms ease-out; }
html .cm-next:hover, html .cm-next:focus-visible { gap: 0.35em; }
html :is(a, button).cm-lift:hover { transform: translateY(-2px); box-shadow: none; }
.design-overview__node { transition: opacity 400ms ease-out, transform 400ms ease-out; transition-delay: var(--design-delay, 0ms); }
html.motion-ready .design-overview:not(.is-in) .design-overview__node { opacity: 0; transform: translateY(10px); }
html.motion-ready .design-overview__link { transform: scaleX(0); transform-origin: left center; transition: transform 400ms ease-out; transition-delay: var(--design-delay, 0ms); }
html.motion-ready .design-overview.is-in .design-overview__link { transform: scaleX(1); }
html.parallax-ready .design-eli5 .story-art { transform: translate3d(0, var(--design-parallax, 0px), 0); }
@media (max-width: 639px) {
  html.motion-ready .design-overview__link { transform: scaleY(0); transform-origin: center top; }
  html.motion-ready .design-overview.is-in .design-overview__link { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  html .cm-reveal, html .cm-map__node, html .cm-map__link, html .cm-ping-soft,
  html .design-overview__node, html .design-overview__link, html .design-eli5 .story-art,
  html .cm-glow-btn, html .button-primary, html .button-secondary, html .cm-next,
  html .cm-next::after, html .cm-lift {
    opacity: 1 !important; transform: none !important;
    animation: none !important; transition: none !important;
  }
}