.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.main {
  min-height: calc(100vh - 140px);
  padding-top: 112px;
}

.page-hero {
  padding: var(--sp-7) 0 var(--sp-5);
}

.page-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 700;
}

.page-title {
  max-width: 780px;
  margin-bottom: var(--sp-4);
}

.page-lede {
  max-width: 740px;
  font-size: 1.08rem;
}

.section {
  padding: var(--sp-7) 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}

.section-header p {
  max-width: 560px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  padding: var(--sp-4) 0;
  transition:
    padding var(--medium) var(--ease),
    transform var(--medium) var(--ease),
    opacity var(--medium) var(--ease);
}

.site-header.is-hidden {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

.nav-shell {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-4);
  min-height: 64px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  transition:
    min-height var(--medium) var(--ease),
    background var(--medium) var(--ease),
    border-color var(--medium) var(--ease),
    box-shadow var(--medium) var(--ease);
}

.site-header.is-scrolled {
  padding: var(--sp-2) 0;
}

.site-header.is-scrolled .nav-shell {
  min-height: 56px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(14px);
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
}

.brand-mark img {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--border);
}

.nav-links {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 34px);
}

.nav-link {
  position: relative;
  color: var(--text-muted);
  font-size: var(--fs-small);
  font-weight: 560;
  transition: color var(--fast) var(--ease);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--fast) var(--ease);
}

.nav-link:hover,
.nav-link[aria-current="page"] {
  color: var(--text);
}

.nav-link:hover::after,
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: var(--sp-2);
}

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 80px);
  padding: 140px 0 var(--sp-8);
  gap: var(--sp-7);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(40px, 6vw, 80px);
  align-items: stretch;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-2);
}

.hero-heading {
  font-size: var(--fs-hero);
  line-height: 0.98;
}

.hero-heading span {
  display: block;
}

.hero-heading .intro {
  margin-bottom: var(--sp-2);
  color: var(--text-muted);
  font-size: clamp(1.15rem, 2vw, 1.65rem);
  font-weight: 520;
}

.hero-description {
  font-size: 1.12rem;
}

.hero-socials,
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.hero-bottom-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}



.hero-visual {
  display: flex;
  justify-content: end;
  align-items: stretch;
}

.avatar-frame {
  position: relative;
  height: 100%;
  max-height: 380px;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: rotate(0deg) scale(1);
  transition: transform var(--slow) var(--ease);
}

.avatar-frame:hover {
  transform: rotate(7deg) scale(1.025);
}

.avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(240px, 310px) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 88px);
  align-items: start;
}

.sticky-panel {
  position: sticky;
  top: 112px;
}

.essay {
  display: grid;
  gap: var(--sp-6);
  max-width: 820px;
}

.essay-card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.tech-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.tech-stack > div {
  display: grid;
  gap: var(--sp-3);
}

.projects-grid,
.communities-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4);
}

.span-all {
  grid-column: 1 / -1;
}

.medium-card {
  grid-column: span 3;
}

.small-card {
  grid-column: span 2;
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: clamp(32px, 6vw, 72px);
  align-items: start;
}

.detail-content {
  display: grid;
  gap: var(--sp-5);
  max-width: 780px;
}

.detail-aside {
  position: sticky;
  top: 112px;
  display: grid;
  gap: var(--sp-3);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1.15fr);
  gap: clamp(32px, 7vw, 88px);
  align-items: start;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-5) 0;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

@media (max-width: 1024px) {
  .hero-grid,
  .about-grid,
  .detail-grid,
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .hero {
    align-items: start;
    padding-top: 132px;
  }

  .featured-card {
    grid-template-columns: 1fr;
  }

  .featured-card .visual-panel {
    min-height: 240px;
  }

  .hero-visual {
    order: -1;
    justify-content: center;
  }

  .hero-copy {
    text-align: center;
  }

  .hero-bottom-actions,
  .hero-socials,
  .pill-row {
    justify-content: center;
  }

  .sticky-panel,
  .detail-aside {
    position: static;
  }

  .projects-grid,
  .communities-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .medium-card,
  .small-card {
    grid-column: span 1;
  }

  .identity-card {
    max-width: 420px;
    margin-inline: auto;
  }
}

@media (max-width: 820px) {
  .nav-shell {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  .nav-links {
    position: fixed;
    top: 84px;
    left: 16px;
    right: 16px;
    display: grid;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition:
      opacity var(--medium) var(--ease),
      transform var(--medium) var(--ease);
  }

  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .nav-link {
    padding: 10px 12px;
  }

  .nav-link::after {
    left: 12px;
    right: auto;
    width: 28px;
  }

  .projects-grid,
  .communities-grid,
  .tech-stack {
    grid-template-columns: 1fr;
  }

  .medium-card,
  .small-card,
  .span-all {
    grid-column: 1 / -1;
  }

  .section-header,
  .footer-inner {
    display: grid;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 24px, var(--container));
  }

  .main {
    padding-top: 96px;
  }

  .page-hero {
    padding-top: var(--sp-5);
  }

  .section {
    padding: var(--sp-6) 0;
  }

  .hero {
    min-height: auto;
    padding-bottom: var(--sp-7);
  }

  .avatar-frame {
    height: auto;
    width: min(100%, 280px);
    margin-inline: auto;
  }
}