/* Tokyo Alex homepage refresh v2: editorial hero, stronger proof, simpler mobile navigation. */

.site-home .hero {
  background:
    linear-gradient(90deg, rgba(5, 15, 29, .99) 0%, rgba(5, 15, 29, .98) 46%, rgba(5, 15, 29, .82) 58%, rgba(5, 15, 29, .20) 100%),
    url("images/home-proof/251027.jpg") right center / 52% 100% no-repeat,
    #071326;
}

.site-home .hero-inner {
  min-height: clamp(560px, 72svh, 720px);
}

.site-home .hero h1,
.site-home .hero-copy,
.site-home .hero-actions,
.site-home .breadcrumbs,
.site-home .hero .eyebrow {
  max-width: min(690px, 58%);
}

.site-home .hero h1 {
  max-width: min(760px, 62%);
}

.site-home .meta-list {
  width: min(780px, 68%);
}

.site-home .meta-list div:nth-child(1) strong,
.site-home .meta-list div:nth-child(2) strong {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -.035em;
}

.site-home .meta-list div:nth-child(3) strong,
.site-home .meta-list div:nth-child(4) strong {
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
}

.site-home #proof .section-desc {
  max-width: 460px;
}

.site-home #resume .section-head,
.site-home #projects .section-head {
  margin-bottom: 30px;
}

.site-home #projects .home-band {
  grid-template-columns: minmax(0, 1fr) 240px;
  align-items: stretch;
}

.site-home #projects .project-feature {
  min-height: 0;
}

.site-home #projects .project-feature p {
  max-width: 720px;
}

.site-home .footer {
  border-top: 1px solid rgba(7, 19, 38, .08);
  background: rgba(248, 250, 253, .92);
}

.site-home .footer-inner {
  min-height: 112px;
}

@media (max-width: 980px) {
  .site-home .hero {
    background:
      linear-gradient(90deg, rgba(5, 15, 29, .99) 0%, rgba(5, 15, 29, .97) 58%, rgba(5, 15, 29, .68) 100%),
      url("images/home-proof/251027.jpg") right center / 62% 100% no-repeat,
      #071326;
  }

  .site-home .hero h1,
  .site-home .hero-copy,
  .site-home .hero-actions,
  .site-home .breadcrumbs,
  .site-home .hero .eyebrow {
    max-width: min(680px, 72%);
  }

  .site-home .meta-list {
    width: min(760px, 82%);
  }
}

@media (max-width: 760px) {
  /* Mobile header: explicitly undo the base <=920px column layout. */
  .site-home .topbar {
    min-height: 64px;
  }

  .site-home .nav {
    width: min(100% - 24px, var(--max));
    min-height: 64px;
    padding: 8px 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
  }

  .site-home .nav-tools {
    width: auto !important;
    margin-left: auto;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 6px;
  }

  .site-home .nav-links {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    order: 2;
  }

  .site-home .nav-links a:not(.nav-cta) {
    display: none !important;
  }

  .site-home .nav-links .nav-cta {
    width: auto !important;
    min-width: 0 !important;
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: var(--navy) !important;
    box-shadow: none !important;
    font-size: .76rem !important;
    line-height: 1 !important;
  }

  .site-home .language-switcher {
    display: flex !important;
    width: auto !important;
    max-width: none !important;
    align-self: center !important;
    order: 1;
    gap: 0 !important;
    padding: 2px !important;
    border-radius: 9px;
    background: rgba(255, 255, 255, .82);
    overflow: visible !important;
  }

  .site-home .language-switcher button,
  .site-home .language-switcher [data-lang] {
    min-width: 30px !important;
    min-height: 28px !important;
    padding: 5px 6px !important;
    border-radius: 7px !important;
    font-size: .68rem !important;
  }

  .site-home .command-trigger,
  .site-home .mobile-language-trigger {
    display: none !important;
  }

  /* The homepage is small enough that deferred rendering causes visible blank placeholders on mobile. */
  .site-home .performance-deferred {
    content-visibility: visible !important;
    contain-intrinsic-size: none !important;
  }

  .site-home .hero {
    background:
      linear-gradient(180deg, rgba(5, 15, 29, .38) 0%, rgba(5, 15, 29, .72) 34%, rgba(5, 15, 29, .98) 68%),
      url("images/home-proof/251027.jpg") center 20% / cover no-repeat,
      #071326;
  }

  .site-home .hero-inner {
    min-height: 610px;
    align-content: end;
    padding-top: 164px;
    padding-bottom: 28px;
  }

  .site-home .hero h1,
  .site-home .hero-copy,
  .site-home .hero-actions,
  .site-home .breadcrumbs,
  .site-home .hero .eyebrow,
  .site-home .meta-list {
    max-width: 100%;
    width: 100%;
  }

  .site-home .breadcrumbs {
    margin-bottom: 10px;
    font-size: .72rem;
  }

  .site-home .hero .eyebrow {
    margin-bottom: 10px;
    font-size: .68rem;
    letter-spacing: .08em;
  }

  .site-home .hero h1 {
    margin-bottom: 14px;
    font-size: clamp(2rem, 8.4vw, 2.45rem);
    line-height: 1.08;
  }

  .site-home .hero-copy {
    font-size: .92rem;
    line-height: 1.66;
  }

  .site-home .hero-actions {
    margin-top: 20px;
  }

  .site-home .hero-actions .button {
    min-height: 44px;
  }

  .site-home .meta-list {
    margin-top: 20px;
  }

  .site-home .meta-list div {
    min-height: 72px;
    padding: 13px 12px;
  }

  .site-home .meta-list span {
    margin-top: 4px;
    font-size: .7rem;
  }

  .site-home main {
    padding-block: 0 48px;
  }

  .site-home .section {
    padding-block: 52px;
  }

  .site-home .section-head {
    margin-bottom: 24px;
  }

  .site-home .section h2 {
    font-size: clamp(1.65rem, 7vw, 2rem);
  }

  .site-home .section-desc {
    font-size: .92rem;
    line-height: 1.68;
  }

  .site-home #services .grid {
    gap: 12px;
  }

  .site-home #services .card {
    min-height: 0 !important;
    padding: 21px 20px 20px;
    border-radius: 14px;
  }

  .site-home #services .card-kicker {
    position: static !important;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .68rem;
    line-height: 1;
  }

  .site-home #services .card-kicker::before,
  .site-home #services .card-kicker::after {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .site-home #services .card-kicker::after {
    display: none !important;
  }

  .site-home #services .card h3 {
    margin-bottom: 8px;
    font-size: 1.3rem;
    line-height: 1.25;
  }

  .site-home #services .card p {
    font-size: .92rem;
    line-height: 1.66;
  }

  .site-home #services .card-link {
    margin-top: 16px;
    font-size: .9rem;
  }

  .site-home #resume .note-panel,
  .site-home #projects .project-feature {
    padding: 22px 20px;
  }

  .site-home #projects .home-band {
    grid-template-columns: 1fr;
  }

  .site-home #projects .home-stack {
    display: none;
  }

  .site-home #projects .compact-actions {
    gap: 8px;
  }

  .site-home #projects .compact-actions .button {
    min-height: 44px;
  }

  .site-home #contact {
    padding-top: 42px;
    padding-bottom: 16px;
  }

  .site-home #contact .note-panel {
    padding: 26px 22px;
  }

  .site-home #contact .note-panel strong {
    font-size: 1.7rem;
    line-height: 1.2;
  }

  .site-home #contact .note-panel p {
    font-size: .92rem;
    line-height: 1.68;
  }

  .site-home .footer-inner {
    min-height: 88px;
    padding-block: 22px;
  }
}

@media (max-width: 520px) {
  .site-home .brand {
    gap: 7px;
    font-size: .86rem;
    white-space: nowrap;
  }

  .site-home .brand-mark {
    width: 32px;
    height: 32px;
  }

  .site-home .nav {
    width: min(100% - 20px, var(--max));
  }

  .site-home .language-switcher button[data-lang="zh"] {
    font-size: 0 !important;
  }

  .site-home .language-switcher button[data-lang="zh"]::after {
    content: "中";
    font-size: .68rem;
  }

  .site-home .language-switcher button[data-lang="ja"] {
    font-size: 0 !important;
  }

  .site-home .language-switcher button[data-lang="ja"]::after {
    content: "日";
    font-size: .68rem;
  }

  .site-home .hero-inner {
    width: min(100% - 28px, var(--max));
    min-height: 585px;
    padding-top: 150px;
  }

  .site-home .breadcrumbs {
    display: none;
  }

  .site-home .hero h1 {
    font-size: clamp(1.95rem, 9vw, 2.3rem);
  }

  .site-home .hero-actions .button {
    flex: 1 1 0;
    padding-inline: 12px;
  }

  .site-home .meta-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-home .meta-list div:nth-child(1) strong,
  .site-home .meta-list div:nth-child(2) strong {
    font-size: 1.22rem;
  }

  .site-home .meta-list div:nth-child(3) strong,
  .site-home .meta-list div:nth-child(4) strong {
    font-size: .9rem;
  }

  .site-home .section {
    padding-block: 46px;
  }

  .site-home #contact {
    padding-top: 34px;
  }
}

/* Keep the 01 / 02 / 03 service markers aligned with their labels at every viewport width. */
.site-home #services .card-kicker::before,
.site-home #services .card-kicker::after {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.site-home #services .card-kicker::after {
  display: none !important;
}

/* Homepage field-record photos are intentionally preview-only. Full image viewing stays in the resume. */
.site-home .home-proof-card,
.site-home .home-proof-card * {
  pointer-events: none !important;
  cursor: default !important;
}

.site-home .home-proof-card:hover img {
  transform: none !important;
}

/* Homepage owner quick-access and contact kicker fix. */
.site-home #contact .card-kicker {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  gap: 8px !important;
  padding: 6px 12px 6px 10px !important;
  border: 1px solid rgba(214, 169, 79, .28) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .025) !important;
  line-height: 1 !important;
}

.site-home #contact .card-kicker::before {
  position: static !important;
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: var(--gold) !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .site-home .mobile-language-trigger {
    display: none !important;
  }

  .site-home .command-trigger {
    order: 3;
    display: inline-grid !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    flex: 0 0 34px !important;
    place-items: center;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(7, 19, 38, .08) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, .88) !important;
    color: var(--navy) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    line-height: 1 !important;
  }

  .site-home .command-trigger span {
    display: none !important;
  }

  .site-home .command-trigger::after {
    content: "☰";
    font: 900 .92rem/1 system-ui, sans-serif;
    letter-spacing: 0;
  }
}

@media (max-width: 420px) {
  .site-home .nav {
    gap: 6px !important;
  }

  .site-home .nav-tools {
    gap: 4px !important;
  }

  .site-home .nav-links .nav-cta {
    padding-inline: 8px !important;
  }

  .site-home .language-switcher button,
  .site-home .language-switcher [data-lang] {
    min-width: 28px !important;
    padding-inline: 5px !important;
  }
}


/* Visual quick-access launcher: compact in the header, tile-based in the dialog. */
@media (max-width: 760px) {
  .site-home .nav-links .nav-cta { display: none !important; }
  .site-home .command-trigger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 10px !important;
    background: var(--navy) !important;
    color: #fff !important;
    border-color: var(--navy) !important;
    box-shadow: none !important;
    font-size: 1rem !important;
  }
  .site-home .nav-tools { gap: 5px !important; }
}
.site-home .command-dialog {
  width: min(720px, calc(100% - 24px));
  max-height: min(760px, calc(100dvh - 28px));
  border-radius: 20px;
  background: #071326;
}
.site-home .command-shell { padding: 20px; }
.site-home .command-heading { display: grid; gap: 3px; }
.site-home .command-subtitle { color: rgba(255,255,255,.52); font-size: .76rem; font-weight: 700; }
.site-home .command-results {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-height: none;
  overflow: visible;
  margin-top: 2px;
}
.site-home .command-item.command-tile {
  min-width: 0;
  min-height: 94px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}
.site-home .command-item.command-tile:hover,
.site-home .command-item.command-tile:focus-visible { border-color: rgba(126,231,255,.42); background: rgba(126,231,255,.09); }
.site-home .command-icon {
  display: grid !important;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.10);
  color: #8adfff !important;
  font-size: .86rem !important;
  font-weight: 950;
}
.site-home .command-copy { display: grid !important; gap: 2px; min-width: 0; color: #fff !important; font-size: inherit !important; }
.site-home .command-copy strong { overflow-wrap: anywhere; font-size: .92rem; line-height: 1.2; }
.site-home .command-copy > span { color: rgba(255,255,255,.46) !important; font-size: .7rem !important; line-height: 1.2; }
.site-home .command-search-toggle {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  font: inherit;
  font-size: .84rem;
  font-weight: 850;
  cursor: pointer;
}
.site-home .command-search-wrap { margin-top: 10px; }
.site-home .command-search-wrap[hidden] { display: none !important; }
.site-home .command-search { min-height: 48px; font-size: 16px; }
@media (max-width: 620px) {
  .site-home .command-dialog {
    width: calc(100% - 16px);
    margin: auto auto max(8px, env(safe-area-inset-bottom));
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }
  .site-home .command-shell { padding: 16px; }
  .site-home .command-results { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .site-home .command-item.command-tile { min-height: 86px; padding: 12px; }
  .site-home .command-head { margin-bottom: 12px; }
}


/* Final mobile header fit + mirrored main navigation dialog. */
@media (max-width: 560px) {
  .site-home .nav {
    width: min(100% - 16px, var(--max)) !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
  }
  .site-home .brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
    font-size: .84rem !important;
  }
  .site-home .brand-mark {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
  }
  .site-home .nav-tools {
    width: auto !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .site-home .nav-links { display: none !important; }
  .site-home .language-switcher {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    max-width: none !important;
    overflow: visible !important;
    padding: 2px !important;
  }
  .site-home .language-switcher button,
  .site-home .language-switcher [data-lang] {
    width: 30px !important;
    min-width: 30px !important;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: .68rem !important;
  }
  .site-home .command-trigger {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
  }
}
@media (max-width: 380px) {
  .site-home .brand { font-size: .78rem !important; }
}
.site-home .command-nav-tile { min-height: 82px !important; }
.site-home .command-nav-tile .command-copy { align-self: stretch; }
.site-home .command-nav-tile .command-copy strong { font-size: .95rem; }
.site-home .command-search-toggle,
.site-home .command-search-wrap { display: none !important; }

/* Homepage uses the same unified mobile navigation as the rest of the site. */
@media (max-width: 760px) {
  .site-home .nav-links { display: none !important; }
  .site-home .mobile-language-trigger { display: none !important; }
  .site-home .language-switcher,
  .site-home .topbar.nav-mobile-compact .language-switcher { display: inline-flex !important; }
  .site-home .language-switcher button[data-lang="en"] {
    display: inline-flex !important;
    visibility: visible !important;
    width: 30px !important;
    min-width: 30px !important;
  }
  .site-home .command-trigger {
    display: inline-grid !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    flex: 0 0 38px !important;
  }
}
@media (max-width: 390px) {
  .site-home .language-switcher button[data-lang="en"] { width: 28px !important; min-width: 28px !important; }
}