/* Page-specific styles. Everything reusable lives in design/web/.
   Requires design/core/tokens.css, design/web/scale.css, design/web/patterns.css. */

/* Header bar */
.bar { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: var(--border-rule) solid var(--rule); }
.bar > .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; }
.bar-mark { font-size: var(--fs-micro); color: var(--inkMute); letter-spacing: .01em; }

.lang { display: flex; align-items: center; gap: 14px; font-size: 16px; }
.lang-sep { color: var(--rule); }
.lang-btn {
  font: inherit; font-size: 16px; cursor: pointer;
  padding: 11px 4px; min-height: 44px;
  border: 0; background: none; color: var(--inkMute);
  transition: color .15s ease;
}
.lang-btn:hover { color: var(--ink); }
.lang-btn.is-active { color: var(--accent); font-weight: 500; font-style: italic; }

/* Hero: the one place with a portrait, so the grid is page-specific */
.hero { padding-top: 96px; padding-bottom: 88px; }
.hero-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--grid-gap); align-items: end; }
.hero-text { min-width: 0; }
.hero-name {
  font-family: var(--ff-display); font-weight: 400;
  font-variation-settings: 'opsz' var(--opsz-display);
  font-size: clamp(52px, 8.5vw, 104px); line-height: 1;
  letter-spacing: -.01em; text-wrap: balance; margin: 0;
}
.hero-role {
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.4;
  color: var(--inkSoft); max-width: 22ch; text-wrap: pretty; margin: 32px 0 0;
}
.hero-photo {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 5; object-fit: cover;
  border: var(--border-rule) solid var(--rule); border-radius: var(--radius-md);
  background: var(--paperAlt);
}

picture { display: block; min-width: 0; }

/* Dark band: the short bio */
.band { padding-top: 104px; padding-bottom: 108px; }
.band-body { min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.motto { margin-top: 22px; color: var(--darkInk); max-width: 20ch; }

/* Contact and footer */
.contact { padding-top: 96px; padding-bottom: 40px; }
.legal { padding-top: 24px; padding-bottom: 96px; }
.legal-year { padding-top: 18px; }
.prewrap { white-space: pre-line; max-width: 60ch; }

/* The eyebrow acts as a column label next to band, contact and footer */
.row > .t-eyebrow { padding-top: 10px; margin: 0; }

@media (max-width: 760px) {
  .hero { padding-top: 56px; padding-bottom: 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero-photo { aspect-ratio: 3 / 2; order: -1; }
  .hero-name { font-size: clamp(38px, 11.5vw, 60px); }
  .band { padding-top: 72px; padding-bottom: 76px; }
  .contact { padding-top: 64px; }
  .legal { padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}