/* ---------------------------------------------------------------
   SITE HEADER — home variant (nav-only, right-aligned)
   --------------------------------------------------------------- */
.site-header {
  height: 64px;
  justify-content: flex-end;
}

/* ---------------------------------------------------------------
   WELCOME PAGE
   --------------------------------------------------------------- */
.stage {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 6rem 2rem;
}

.composition {
  max-width: 640px;
  width: 100%;
  text-align: left;
}

.logo {
  display: block;
  width: 88px;
  height: auto;
  margin-bottom: 3.5rem;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both;
}

.welcome-index {
  margin-bottom: 1.75rem;
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s both;
}

.name {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.8vw, 68px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.025em;
  color: var(--ink-primary);
  margin-bottom: 1.25rem;
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s both;
}

.role {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(20px, 2.6vw, 26px);
  color: var(--accent-rust);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 3rem;
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both;
}
.role em { font-style: italic; font-weight: 300; color: var(--ink-secondary); }
.aside { display: block; font-style: italic; color: var(--ink-secondary); font-size: 1em; line-height: 1.3; margin-top: 0.4em; }

.bio {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-primary);
  max-width: 54ch;
  margin-bottom: 3.5rem;
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.65s both;
}
.bio p + p { margin-top: 2rem; }
.bio .index-line { margin-bottom: 0.25rem; }

.cta-block {
  animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.8s both;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-faint);
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-primary);
  padding: 0.5rem 0;
  transition: color 0.3s ease, gap 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cta__rule {
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--ink-primary);
  transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.3s ease;
}
.cta__arrow {
  font-family: var(--font-mono);
  font-size: 14px;
  display: inline-block;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cta:hover { color: var(--accent-rust); gap: 1.25rem; }
.cta:hover .cta__rule { width: 80px; background: var(--accent-rust); }
.cta:hover .cta__arrow { transform: translateX(4px); color: var(--accent-rust); }

.cta__note {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-top: 0.75rem;
  padding-left: 56px;
}

/* Chrome bar — home variant (shorter) */
.chrome-bar--top { height: 64px; background: linear-gradient(to bottom, rgba(246,245,244,0.92) 0%, rgba(246,245,244,0.85) 60%, rgba(246,245,244,0.00) 100%); }
.chrome-bar--bottom { height: 64px; }
body.is-scrolled .chrome-bar--top,
body.is-scrolled .chrome-bar--bottom { height: 48px; }

@media (max-width: 720px) {
  .site-header { height: 48px; padding: 0 22px; }
  .stage { padding: 4rem 1.5rem; }
  .logo { width: 64px; margin-bottom: 2.5rem; }
  .name { font-size: 36px; }
  .role { font-size: 17px; margin-bottom: 2rem; }
  .bio { font-size: 15.5px; margin-bottom: 2.5rem; }
  .cta { font-size: 15px; }
  .cta__note { padding-left: 0; }
  .chrome-bar--top, .chrome-bar--bottom { height: 48px; }
  body.is-scrolled .chrome-bar--top,
  body.is-scrolled .chrome-bar--bottom { height: 36px; }
}