/* GitHub-profile foyer: centered shell, actions above the UI */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600&family=Noto+Sans+TC:wght@300;400;500;600&family=Noto+Sans:wght@300;400;500;600&display=swap");

:root {
  --bg: #0d1117;
  --canvas: #0d1117;
  --border: #30363d;
  --fg: #e6edf3;
  --fg-muted: #8b949e;
  --fg-link: #2f81f7;
  --btn-bg: #21262d;
  --btn-hover: #30363d;
  --btn-border: #363b42;
  --sidebar: 296px;
  /* GitHub profile shell ≈ 1280; README column = shell − sidebar − gap */
  --shell: 1280px;
  /*
   * Near GitHub UI: their stack names "Noto Sans" after system fonts.
   * Pin Noto for Latin + SC/TC so EN/中文一致，不随系统漂移。
   */
  --font-ui: "Noto Sans", "Noto Sans TC", "Noto Sans SC", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
}

.foyer {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.foyer-stage {
  width: min(100%, var(--shell));
  margin: 0 auto;
}

.foyer-layout {
  display: grid;
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* —— Left: profile —— */
.profile {
  padding-top: 8px;
  font-family: var(--font-ui);
}

.profile-avatar {
  display: block;
  width: 100%;
  max-width: var(--sidebar);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #010409;
}

.profile-names {
  margin-top: 16px;
}

.profile-name {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--fg);
}

.profile-name-zh {
  margin: 2px 0 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.25;
  color: var(--fg);
}

.profile-login {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 300;
  line-height: 24px;
  color: var(--fg-muted);
}

.profile-meta {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--fg);
}

.profile-meta li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.profile-meta svg {
  flex: 0 0 auto;
  fill: var(--fg-muted);
}

.profile-meta time {
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.profile-meta .fg-muted {
  color: var(--fg-muted);
}

/* —— Right: README card —— */
.readme-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--canvas);
  overflow: hidden;
  min-width: 0;
  font-family: var(--font-ui);
}

.readme-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--fg-muted);
}

.readme-card-header svg {
  fill: var(--fg-muted);
  flex: 0 0 auto;
}

.readme-card-header a {
  color: var(--fg-link);
  text-decoration: none;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.readme-card-header a:hover {
  text-decoration: underline;
}

.readme-box {
  padding: 16px 32px 32px;
  min-height: 200px;
}

.readme-box.markdown-body {
  background: transparent;
  color: var(--fg);
  font-family: var(--font-ui);
  /* avoid awkward mid-address wraps in contact lines */
  overflow-wrap: normal;
  word-break: normal;
}

.readme-box.markdown-body a {
  white-space: nowrap;
}

.readme-box .foyer-loading,
.readme-box .foyer-error {
  margin: 1rem 0;
  color: var(--fg-muted);
  font-size: 14px;
}

.readme-box .foyer-error a {
  color: var(--fg-link);
}

/* —— Blog entry above the GitHub UI —— */
.foyer-blog {
  margin: 0 0 40px;
  padding-bottom: 8px;
  text-align: center;
  font-family: var(--font-ui);
}

.foyer-blog-label {
  margin: 0 0 18px;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--fg);
}

.foyer-actions {
  display: inline-flex;
  justify-content: center;
  align-items: stretch;
  gap: 0.75rem;
}

.profile-btn {
  display: inline-block;
  min-width: 10.5rem;
  text-align: center;
  padding: 12px 20px;
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 6px;
  text-decoration: none;
}

.profile-btn:hover {
  background: var(--btn-hover);
  border-color: #8b949e;
  text-decoration: none;
  color: var(--fg);
}

/* —— Mobile —— */
@media (max-width: 768px) {
  .foyer {
    align-items: flex-start;
    padding: 20px 12px 32px;
  }

  .foyer-layout {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .profile {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 8px;
    align-items: center;
    padding-top: 0;
  }

  .profile-avatar {
    width: 72px;
    height: 72px;
    max-width: 72px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    align-self: center;
  }

  .profile-names {
    margin-top: 0;
    min-width: 0;
  }

  .profile-name {
    font-size: 20px;
  }

  .profile-name-zh {
    font-size: 17px;
  }

  .profile-login {
    margin-bottom: 0;
    font-size: 16px;
  }

  .profile-meta {
    grid-column: 1 / -1;
    margin-top: 4px;
  }

  .readme-box {
    padding: 12px 16px 20px;
  }

  .readme-box.markdown-body {
    font-size: 14px;
  }

  .readme-box.markdown-body a {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .readme-box.markdown-body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .foyer {
    padding: 28px 12px 36px;
  }

  .foyer-blog {
    margin: 0 0 28px;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 10px 0 14px;
    background: linear-gradient(
      to bottom,
      var(--bg) 65%,
      rgba(13, 17, 23, 0)
    );
  }

  .foyer-blog-label {
    font-size: 20px;
    margin-bottom: 14px;
  }

  .foyer-actions {
    display: flex;
    width: 100%;
    gap: 0.6rem;
  }

  .profile-btn {
    min-width: 0;
    flex: 1 1 0;
    padding: 12px 14px;
    font-size: 16px;
  }
}