/* Refinement 07: Desktop Hero convergence and personal-brand Footer. */

@media (min-width: 1101px) {
  .header-inner {
    width: min(calc(100% - 48px), 1320px);
  }

  .hero-inner {
    width: min(calc(100% - 48px), 1260px);
    grid-template-columns: minmax(0, 40fr) minmax(0, 48fr);
    gap: clamp(136px, 10vw, 144px);
  }

  .hero-stage { min-height: 500px; }

  .module-console { top: 12%; right: 4%; }
  .module-resume { top: 43%; left: 4%; }
  .module-tracker { right: 5%; bottom: 2%; }
}

/* Homepage works are an entry point: keep the evidence visual, shorten the scan path. */
.work-panel {
  margin-top: clamp(24px, 2vw, 32px);
  border-top: 1px solid #585852;
}

.work-copy h3 {
  max-width: 17em;
  margin-bottom: 20px;
  font-size: clamp(1.5rem, 1.75vw, 1.95rem);
  line-height: 1.2;
}

.work-summary {
  margin-bottom: 0;
  line-height: 1.78;
}

.work-copy dl {
  margin: clamp(28px, 3vw, 40px) 0 0;
}

.work-copy dl div {
  padding-block: 18px;
}

.work-links {
  margin-top: clamp(28px, 3vw, 40px);
}

.site-footer > .footer-main.footer-main {
  width: min(100%, 1220px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  align-items: center;
  gap: clamp(48px, 7vw, 112px);
  margin-inline: auto;
}

.footer-brand {
  justify-items: start;
  gap: 10px;
  text-align: left;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 12px;
  border: 0;
}

.footer-links a {
  min-width: 126px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid #cecec8;
  border-radius: 999px;
  background: transparent;
  color: var(--v2-black);
  font: 700 0.72rem/1 var(--v2-sans);
  letter-spacing: 0.055em;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.pixel-channel-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: currentColor;
}

.footer-links a:hover {
  border-color: var(--pixel-active);
  background: #efefeb;
  color: var(--v2-black);
}

.footer-links a:focus-visible {
  border-color: var(--pixel-active);
  outline: 3px solid var(--pixel-active);
  outline-offset: 3px;
}

.footer-meta {
  width: min(100%, 1220px);
  margin: 40px auto 28px;
  text-align: left;
}

.footer-wordmark {
  width: min(100%, 1220px);
  margin-bottom: 0;
  padding-bottom: 8px;
  font-size: clamp(3.5rem, 5.9vw, 5.3rem);
  line-height: 1.05;
  letter-spacing: -0.055em;
  text-align: left;
}

@media (max-width: 760px) {
  .site-footer > .footer-main.footer-main {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-brand {
    justify-items: center;
    text-align: center;
  }

  .footer-links {
    width: 100%;
    justify-content: center;
    gap: 10px;
  }

  .footer-links a {
    min-width: min(142px, calc(50% - 5px));
    min-height: 48px;
    padding-inline: 14px;
  }

  .footer-meta {
    margin-block: 26px 22px;
    text-align: center;
  }

  .footer-wordmark {
    max-width: 100%;
    margin-bottom: 0;
    font-size: clamp(1.55rem, 7vw, 1.85rem);
    letter-spacing: -0.05em;
    overflow: visible;
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-links a {
    transition: none;
  }
}


/* Final color closeout: one brand accent, neutral Footer defaults. */
.header-cta.header-cta {
  border-color: var(--pixel-active);
  background: var(--pixel-active);
  color: #fff;
}

.footer-links a > span {
  color: inherit;
}

.footer-links a:active {
  border-color: var(--pixel-active);
  color: var(--pixel-active);
}


/* Contact adds the public job-application tracker after the resume service. */
.contact-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 760px) {
  .contact-links {
    grid-template-columns: 1fr;
  }
}

/* UI experiment: mobile visitors choose first, then read one work in depth. */
@media (max-width: 760px) {
  .work-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 0 10px;
    border: 0;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .work-tabs::-webkit-scrollbar { display: none; }
  .work-tabs button {
    min-width: min(76vw, 270px);
    min-height: 54px;
    flex: 0 0 auto;
    padding: 12px 14px 12px 32px;
    border: 1px solid #585852;
    scroll-snap-align: start;
  }
  .work-panel { border-top: 1px solid #585852; }
  .work-media { padding: 6px; }
  .work-copy > dl { margin-block: 18px; }
  .module-console { top: 12%; right: 2%; }
  .module-resume { top: 43%; left: 2%; }
  .module-tracker { right: 3%; bottom: 1%; }
  .work-panel { margin-top: 24px; }
  .work-copy > h3 { margin-bottom: 18px; font-size: 1.55rem; line-height: 1.22; }
  .work-copy > .work-summary { margin-bottom: 0; line-height: 1.72; }
  .work-copy > dl { margin: 28px 0 0; }
  .work-copy dl div { padding-block: 17px; }
  .work-copy > .work-links { margin-top: 28px; }
  .capability-grid button { min-height: 94px; }
  .capability-grid button > span { margin-bottom: 9px; }
  .capability-panel-copy,
  .capability-panel-proof { padding: 24px 20px; }
}