/* Refinement 04: mapped problem entries, restrained pixel behavior and Tony signature. */
.brand-kicker { display: none; }

/* Problem cards become real entries without changing the locked grid or density. */
.problem-entry {
  width: 100%;
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.problem-entry::after { display: none; }
.problem-entry:hover,
.problem-entry:focus-visible,
.problem-entry[data-state="ACTIVE"] {
  border-color: #b9b9b2;
  background: #f3f3f0;
  color: inherit;
  transform: none;
  box-shadow: none;
}
.problem-entry:focus-visible { outline: 3px solid var(--pixel-active); outline-offset: 3px; }
.problem-entry .pixel-node { fill: var(--pixel-node); }
.problem-entry .pixel-idle,
.problem-entry .pixel-path,
.problem-entry .pixel-active { fill: var(--pixel-idle); }
.problem-entry[data-state="ACTIVE"] .pixel-path,
.problem-entry[data-state="ACTIVE"] .pixel-active {
  fill: var(--pixel-active);
  animation: problem-pixel-connect 180ms steps(3, end) both;
}
.problem-entry-label {
  min-height: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  color: #a0a099;
  font-size: .75rem;
  font-weight: 700;
  opacity: 0;
}
.problem-entry[data-state="ACTIVE"] .problem-entry-label { color: var(--pixel-active); opacity: 1; }
.problem-entry-label > span { transition: transform 140ms steps(2, end); }
.problem-entry[data-state="ACTIVE"] .problem-entry-label > span { transform: translateX(4px); }

/* Work tabs use one state pixel; the former orange underline is removed. */
.work-tabs button { position: relative; padding-left: 34px; transition: color 140ms steps(2, end), background-color 140ms steps(2, end); }
.work-tabs button::before {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 6px;
  height: 6px;
  background: #77776f;
  content: "";
  transform: translateY(-50%);
}
.work-tabs button[aria-selected="true"] { box-shadow: none; }
.work-tabs button[aria-selected="true"]::before {
  background: var(--pixel-active);
  animation: tab-pixel-step 160ms steps(2, end) both;
}
.work-tabs button:focus-visible { outline: 3px solid var(--pixel-active); outline-offset: -3px; }
.work-panel { min-height: 660px; }
.work-panel.is-switching .work-media img,
.work-panel.is-switching .work-copy > * { animation-duration: 180ms; animation-timing-function: steps(3, end); }
.work-copy dl div { grid-template-columns: 116px 1fr; }
.work-panel[data-evidence-focus="true"] [data-work-row="evidence"] {
  box-shadow: inset 3px 0 var(--pixel-active);
}
.work-panel[data-evidence-focus="true"] [data-work-case]::before { background: var(--pixel-active); }

/* One shared pixel response for existing actions. */
.button { transform: none; box-shadow: none; }
.button:hover,
.button:focus-visible { transform: none; box-shadow: none; }
.button > span,
.text-link > span,
.hero-contact-link > span { transition: none; }
.button:hover > span,
.button:focus-visible > span,
.text-link:hover > span,
.text-link:focus-visible > span,
.hero-contact-link:hover > span,
.hero-contact-link:focus-visible > span {
  animation: cta-arrow-step 160ms steps(2, end) forwards;
}
.text-link { transition: none; }
.text-link:hover,
.text-link:focus-visible { border-bottom-color: var(--pixel-active); }

/* Two low-weight observations only. */
.tony-observation {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 0;
  color: #77776f;
  font-size: .78rem;
  line-height: 1.55;
}
.tony-observation span { color: var(--pixel-active); font: 700 .58rem/1 var(--mono); letter-spacing: .1em; }
.tony-observation-dark { color: #aaa9a3; }

/* Mobile navigation keeps the full Tony identity and explicit active pixels. */
body.menu-open { overflow: hidden; }
.mobile-menu a { position: relative; padding-left: 18px; }
.mobile-menu a::before {
  position: absolute;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--pixel-idle);
  content: "";
}
.mobile-menu a[data-state="ACTIVE"]::before { background: var(--pixel-active); }
.mobile-menu a[data-state="ACTIVE"] { color: var(--pixel-node); box-shadow: none; }
.mobile-menu a:focus-visible { outline: 3px solid var(--pixel-active); outline-offset: -3px; }
.menu-button:focus-visible { outline: 3px solid var(--pixel-active); outline-offset: 2px; }

/* Footer is the compact Tony system signature. */
.footer-live { display: inline-flex; align-items: center; gap: 8px; }
.footer-live i { width: 6px; height: 6px; display: block; background: var(--pixel-active); }

@keyframes problem-pixel-connect {
  0% { opacity: .45; transform: translateX(0); }
  50% { opacity: .72; transform: translateX(2px); }
  100% { opacity: 1; transform: translateX(4px); }
}
@keyframes tab-pixel-step {
  0% { transform: translate(-4px, -50%); }
  50% { transform: translate(-2px, -50%); }
  100% { transform: translate(0, -50%); }
}
@keyframes cta-arrow-step {
  0% { transform: translateX(0); }
  50% { transform: translateX(2px); }
  100% { transform: translateX(4px); }
}


/* Hero weight convergence: desktop / landscape tablet only.
   Keep the accepted route SVG, fixed ports, and interaction state untouched. */
@media (min-width: 901px) {
  .hero {
    min-height: clamp(584px, 76svh, 821px);
    padding-top: calc(var(--v2-header) + 18px);
    padding-bottom: 26px;
  }

  .hero-inner {
    width: min(92%, var(--v2-max));
    grid-template-columns: minmax(0, 38fr) minmax(0, 52fr);
    gap: clamp(56px, 5.5vw, 104px);
  }

  .hero h1 {
    font-size: clamp(3.33rem, 4.59vw, 5.22rem);
  }

  .hero-stage {
    min-height: clamp(414px, 44.2vw, 478px);
  }

  .hero-stage[data-active-route] .system-module:not(.is-route-active) {
    opacity: .8;
  }

  .hero-stage[data-active-route] .path-main {
    opacity: .23;
  }
}
@media (max-width: 1024px) {
  .brand-kicker { display: block; color: #77776f; font: 700 .43rem/1 var(--mono); letter-spacing: .08em; }
  .brand-copy { gap: 2px; }
  .mobile-menu { background: #f7f7f4; }
}

@media (max-width: 760px) {
  .brand { gap: 9px; }
  .brand-logo-c { width: 28px; height: 28px; }
  .brand-copy strong { font-size: .78rem; }
  .brand-copy small { display: block; font-size: .43rem; }
  .menu-button { min-width: 116px; padding-inline: 10px; }
  .current-section { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-menu { padding-top: 16px; }
  .mobile-menu a { min-height: 56px; font-size: 1rem; }
  .problem-entry { min-height: 216px; }
  .problem-entry p { font-size: .82rem; }
  .problem-entry-label { font-size: .7rem; }
  .work-panel { min-height: 0; }
  .work-copy dl div { grid-template-columns: 94px 1fr; }
  .tony-observation { align-items: flex-start; margin-top: 18px; font-size: .75rem; }
  .site-footer { min-height: 0; gap: 8px; padding-block: 24px; }
  .site-footer > div:first-child { gap: 4px; }
  .footer-status { gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .problem-entry[data-state="ACTIVE"] .pixel-path,
  .problem-entry[data-state="ACTIVE"] .pixel-active,
  .work-tabs button[aria-selected="true"]::before,
  .button:hover > span,
  .button:focus-visible > span,
  .text-link:hover > span,
  .text-link:focus-visible > span,
  .hero-contact-link:hover > span,
  .hero-contact-link:focus-visible > span,
  .work-panel.is-switching .work-media img,
  .work-panel.is-switching .work-copy > * { animation: none; transform: none; }
  html:focus-within { scroll-behavior: auto; }
}