@import url('./tokens.css');

/*
 * Viation web stylesheet.
 *
 * Implements Arkira + Viation Brand Specification v2.0.0 for the
 * Viation web surface. Source spec lives at
 * ~/Developer/arkira-design-system/House Brand/arkira-viation-brand-spec.md
 *
 * Viation web is dark-mode only per spec section 8. Light surface
 * tokens belong to documents and applications, not this site.
 */

/* ============================================================
 * Web fonts (self-hosted, spec section 3.2)
 * Satoshi is self-host only. No CDN.
 * ============================================================ */

@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../assets/fonts/satoshi-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-variable.woff2') format('woff2-variations'),
       url('../assets/fonts/fraunces-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrains-mono-variable.woff2') format('woff2-variations'),
       url('../assets/fonts/jetbrains-mono-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal italic;
  font-display: swap;
}

/* ============================================================
 * Reset
 * ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video { max-width: 100%; height: auto; display: block; }

/* ============================================================
 * Body and typography defaults, spec section 4 and 6
 * ============================================================ */

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--track-body);
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-fg);
}

/* H1, hero display. Satoshi Medium uppercase tracked +20 per
   spec section 7.1 (Viation hero). Sized so 30-char headlines
   single-line within the centered narrow container. */
h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2rem, 2vw + 0.5rem, 3rem);
  line-height: var(--leading-section);
  letter-spacing: var(--track-hero-cap);
  text-transform: uppercase;
}

/* H2, section opener. Satoshi Medium uppercase tracked +40 per
   spec section 7.3. Sized so ~38-char headlines single-line. */
h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(1.375rem, 1.25vw + 0.375rem, 2.125rem);
  line-height: var(--leading-section);
  letter-spacing: var(--track-section-cap);
  text-transform: uppercase;
}

/* H3, subhead. Fraunces editorial accent per spec section 3.1
   (project titles, editorial accent). Sentence case. */
h3 {
  font-family: var(--font-editorial);
  font-weight: var(--weight-bold);
  font-size: var(--type-subhead);
  line-height: var(--leading-subhead);
  letter-spacing: 0;
  font-optical-sizing: auto;
}

/* H4-H6, utility. Satoshi Medium sentence case. */
h4 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--type-body-lg); line-height: var(--leading-body-lg); }
h5 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--type-body); line-height: var(--leading-body); }
h6 { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--type-small); line-height: var(--leading-small); }

p {
  margin: 0;
  max-width: 65ch;
}

a {
  color: var(--color-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

/* Focus ring per accessibility floor */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Form honeypot */
input[name="website"] {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
 * Layout primitives, spec section 4.3
 * ============================================================ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-3);
}
.container--narrow { max-width: var(--container-narrow); }
.container--prose  { max-width: var(--container-prose); }

@media (min-width: 760px) {
  .container { padding-inline: var(--space-5); }
}

.section {
  padding-block: var(--space-6);
}
@media (min-width: 760px) {
  .section { padding-block: var(--space-8); }
}
.section--tight  { padding-block: var(--space-6); }
.section--bleed  { padding-block: 0; }

.stack > * + * { margin-block-start: var(--space-3); }
.stack-lg > * + * { margin-block-start: var(--space-4); }

/* ============================================================
 * Type utilities and editorial details, spec section 6
 * ============================================================ */

/* Eyebrow, Satoshi Medium small caps 13px tracked +120, accent.
   Real small caps per spec section 6.2. */
.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: all-small-caps;
  color: var(--color-accent);
  margin: 0;
}

/* Lede, intro paragraph, body-lg in Fraunces Roman for editorial
   accent register. Sits between display and body face. */
.lede {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-fg);
  max-width: 60ch;
  font-optical-sizing: auto;
}

.muted { color: var(--color-muted); }

/* Section opener rule per spec section 7.3: 2px accent, full
   column width, below section title. Applied via class. */
.rule {
  display: block;
  width: 3rem;
  height: 1px;
  background: var(--color-accent);
  border: 0;
  margin: 0;
}
.rule--section {
  width: 100%;
  height: 2px;
}

/* Pull quote per spec section 6.7 + 7.4 */
.pullquote {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-style: italic;
  font-size: var(--type-subhead);
  line-height: var(--leading-pull);
  border-inline-start: 2px solid var(--color-accent);
  padding-inline-start: 2rem;
  margin: var(--space-4) 0;
  color: var(--color-fg);
}
.pullquote cite {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-style: normal;
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: all-small-caps;
  color: var(--color-muted);
  margin-top: var(--space-2);
}

/* Asterism per spec section 6.5 */
.asterism {
  display: block;
  text-align: center;
  color: var(--color-accent);
  font-size: var(--type-subhead);
  margin: var(--space-6) 0;
}
.asterism::before { content: '\2042'; }

/* Mono utility for technical specs */
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ============================================================
 * Buttons. Satoshi Medium uppercase tracked +20, accent stroke.
 * Signal Green compact fill on hover (kit-compliant under 200px).
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-hero-cap);
  text-transform: uppercase;
  color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  max-width: 12.5rem;
  transition:
    background-color var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}
.btn:hover,
.btn:focus-visible {
  background: var(--color-accent);
  color: var(--viation-surface-primary);
}

.btn--ghost {
  color: var(--color-fg);
  border-color: var(--color-rule);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.link-inline {
  color: var(--color-accent);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.link-inline:hover { color: var(--viation-text-primary); }

/* ============================================================
 * Site header. Sticky, translucent surface, hairline rule.
 * ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(14, 19, 17, 0.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-2);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
}
.site-header__brand img {
  height: 1.75rem;
  width: auto;
}

/* Nav links, Satoshi Medium small caps tracked +60 per spec 7.5 */
.site-nav {
  display: none;
}
.site-nav__list {
  display: flex;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-nav__link {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-nav);
  font-variant-caps: all-small-caps;
  color: var(--color-fg);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-header__cta { display: none; }

.site-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  color: var(--color-fg);
  cursor: pointer;
}
.site-nav__toggle:hover { color: var(--color-accent); border-color: var(--color-accent); }
.site-nav__toggle .bar,
.site-nav__toggle .bar::before,
.site-nav__toggle .bar::after {
  display: block;
  width: 1rem;
  height: 1px;
  background: currentColor;
  content: '';
  position: relative;
}
.site-nav__toggle .bar::before { top: -6px; position: absolute; left: 0; width: 1rem; }
.site-nav__toggle .bar::after  { top:  6px; position: absolute; left: 0; width: 1rem; }

@media (max-width: 879px) {
  .site-nav[data-open="true"] {
    display: block;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: var(--color-bg);
    border-top: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule);
    padding: var(--space-3);
  }
  .site-nav[data-open="true"] .site-nav__list {
    flex-direction: column;
    gap: var(--space-2);
  }
}
@media (min-width: 880px) {
  .site-nav { display: block; }
  .site-header__cta { display: inline-flex; }
  .site-nav__toggle { display: none; }
}

/* ============================================================
 * Hero, spec section 7.1
 * 96px desktop section padding minimum (spec 4.3).
 * 160px minimum below hero before next element (spec 7.1).
 * ============================================================ */

.hero {
  padding-block: var(--space-6);
  border-bottom: 1px solid var(--color-rule);
}
@media (min-width: 760px) {
  .hero { padding-block: var(--space-8); }
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.hero__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hero__headline {
  margin: 0;
}

/* Hero subhead, Fraunces Roman at body-lg. Editorial register. */
.hero__subhead {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body-lg);
  color: var(--color-fg);
  max-width: 50ch;
  margin: 0;
  font-optical-sizing: auto;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* Hero two-column layout: copy left, image right. Stacks on mobile. */
.hero__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hero__media {
  margin: 0;
  padding: 0;
}
.hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
  display: block;
}
@media (min-width: 760px) {
  .hero__layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-6);
    align-items: start;
  }
}

/* ============================================================
 * Section header (eyebrow + h2 + 2px rule + optional lede)
 * ============================================================ */

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  max-width: 56rem;
}
.section-head h1,
.section-head h2 {
  margin: 0;
}

/* ============================================================
 * Cards, spec section 6.6 hairline rules
 * ============================================================ */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

.card__title {
  font-family: var(--font-editorial);
  font-weight: var(--weight-bold);
  font-size: var(--type-subhead);
  line-height: var(--leading-subhead);
  margin: 0;
  font-optical-sizing: auto;
}
.card__body {
  color: var(--color-muted);
  line-height: var(--leading-body);
  margin: 0;
}

.grid {
  display: grid;
  gap: var(--space-3);
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
 * List-as-grid resets, tile helpers, copy width helper
 * ============================================================ */

ul.grid, ol.grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tile-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.tile-media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
  margin-bottom: var(--space-3);
}
.tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.copy-narrow {
  max-width: 60ch;
}

/* ============================================================
 * Environments list
 * ============================================================ */

.env-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-block-start: 1px solid var(--color-rule);
}
.env-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-rule);
}
.env-list__name {
  font-family: var(--font-editorial);
  font-weight: var(--weight-bold);
  font-size: var(--type-body-lg);
  color: var(--color-fg);
  min-width: 14rem;
  font-optical-sizing: auto;
}
.env-list__detail {
  color: var(--color-muted);
  margin: 0;
}

/* ============================================================
 * Partner strip
 * ============================================================ */

.partner-strip {
  background: var(--color-surface);
  border-block: 1px solid var(--color-rule);
}
.partner-strip__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-7);
}
.partner-strip__heading {
  margin: 0;
}
@media (min-width: 880px) {
  .partner-strip__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
  }
}

/* ============================================================
 * CTA band
 * ============================================================ */

.cta-band {
  border-block-start: 1px solid var(--color-rule);
}
.cta-band__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-block: var(--space-9);
  align-items: flex-start;
}
.cta-band__heading {
  margin: 0;
  max-width: 28ch;
}
.cta-band__contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  color: var(--color-muted);
}
.cta-band__contact a { color: var(--color-fg); }
.cta-band__contact a:hover { color: var(--color-accent); }

/* ============================================================
 * Footer
 * ============================================================ */

.site-footer {
  border-block-start: 1px solid var(--color-rule);
  padding-block: var(--space-6) var(--space-4);
  color: var(--color-muted);
  font-size: var(--type-small);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
  padding-block-end: var(--space-5);
  border-block-end: 1px solid var(--color-rule);
}
@media (min-width: 760px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}
.site-footer__brand img {
  height: 1.5rem;
  width: auto;
  margin-bottom: var(--space-2);
}
.site-footer__col h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: all-small-caps;
  color: var(--color-fg);
  margin: 0 0 var(--space-2) 0;
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__col li + li { margin-top: var(--space-1); }
.site-footer__col a { color: var(--color-fg); }
.site-footer__col a:hover { color: var(--color-accent); }
.site-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-block-start: var(--space-3);
  font-size: var(--type-micro);
}
@media (min-width: 760px) {
  .site-footer__legal {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ============================================================
 * Visually hidden + skip link
 * ============================================================ */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: var(--space-2);
  top: -3rem;
  background: var(--color-bg);
  color: var(--color-fg);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-accent);
  z-index: 100;
  transition: top var(--duration-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-2); }

/* ============================================================
 * Project entry (Projects page)
 * ============================================================ */

.project {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-block: var(--space-7);
  border-block-end: 1px solid var(--color-rule);
}
.project:last-of-type { border-block-end: 0; }

@media (min-width: 880px) {
  .project {
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-6);
  }
  .project--reverse .project__body { order: -1; }
}

.project__media {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-rule);
}
.project__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.project__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.project__location {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: all-small-caps;
  color: var(--color-accent);
  margin: 0;
}

/* Project title, Fraunces editorial accent per spec section 3.1.
   Sized at --type-subhead so multi-word names single-line in the
   half-column projects layout. */
.project__name {
  font-family: var(--font-editorial);
  font-weight: var(--weight-bold);
  font-size: var(--type-subhead);
  line-height: var(--leading-subhead);
  margin: 0;
  font-optical-sizing: auto;
  text-transform: none;
  letter-spacing: 0;
}

.project__body p {
  color: var(--color-fg);
  margin: 0;
  max-width: 60ch;
}

.project__quote {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border-inline-start: 2px solid var(--color-accent);
  background: var(--color-surface);
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: var(--type-body-lg);
  line-height: var(--leading-pull);
  color: var(--color-fg);
}
.project__quote cite {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-style: normal;
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: all-small-caps;
  color: var(--color-muted);
  margin-top: var(--space-2);
}

.project__recognition {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: all-small-caps;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  padding: var(--space-0_5) var(--space-2);
  margin-top: var(--space-2);
  align-self: flex-start;
}

.project__credit {
  color: var(--color-muted);
  font-size: var(--type-small);
  margin-top: var(--space-2);
}

/* ============================================================
 * Team page
 * ============================================================ */

.team-locations {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.team-locations li {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: all-small-caps;
  color: var(--color-muted);
}
.team-locations li + li::before {
  content: '·';
  margin-inline-end: var(--space-2);
  color: var(--color-accent);
}

.team-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1120px) {
  .team-grid { grid-template-columns: repeat(4, 1fr); }
}

.team-member {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.team-monogram {
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--viation-surface-primary);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: var(--track-hero-cap);
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.team-member__name {
  font-family: var(--font-editorial);
  font-weight: var(--weight-bold);
  font-size: var(--type-subhead);
  line-height: var(--leading-subhead);
  margin: 0;
  font-optical-sizing: auto;
}
.team-member__role {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: all-small-caps;
  color: var(--color-accent);
  margin: 0;
}
.team-member__bio {
  color: var(--color-fg);
  font-size: var(--type-body);
  margin: 0;
  flex: 1;
}
.team-member__email {
  font-family: var(--font-display);
  font-size: var(--type-small);
  color: var(--color-fg);
  margin-top: var(--space-1);
}
.team-member__email:hover { color: var(--color-accent); }

.team-member--featured { grid-column: 1 / -1; }
@media (min-width: 1120px) {
  .team-member--featured {
    grid-column: span 3;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-5);
  }
  .team-member--featured .team-monogram {
    max-width: 12rem;
    flex-shrink: 0;
  }
  .team-member--featured .team-member__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
  }
}

/* ============================================================
 * Contact form
 * ============================================================ */

.contact-form {
  margin-top: var(--space-4);
  width: 100%;
  max-width: 44rem;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
@media (min-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .field--full { grid-column: 1 / -1; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.field__label {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--type-small);
  letter-spacing: var(--track-eyebrow);
  font-variant-caps: all-small-caps;
  color: var(--color-fg);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: var(--color-surface);
  color: var(--color-fg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.875rem;
  font: inherit;
  font-family: var(--font-body);
  min-height: 2.75rem;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.field textarea {
  min-height: 8rem;
  resize: vertical;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-accent);
}