/* Licensed Suisse Intl webfonts. Supply your own .woff2 files at the paths below.
   The "local" option also uses installed Suisse Intl fonts on your Mac. */
@font-face {
  font-family: "Suisse Intl";
  src: local("Suisse Intl Book"), local("SuisseIntl-Book"),
       url("../fonts/suisse-intl/SuisseIntl-Book.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: local("Suisse Intl Medium"), local("SuisseIntl-Medium"),
       url("../fonts/suisse-intl/SuisseIntl-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: local("Suisse Intl SemiBold"), local("SuisseIntl-SemiBold"),
       url("../fonts/suisse-intl/SuisseIntl-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: local("Suisse Intl Bold"), local("SuisseIntl-Bold"),
       url("../fonts/suisse-intl/SuisseIntl-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --background: #fafaf9;
  --ink: #191b1b;
  --body: #515454;
  --muted: #777a79;
  --hairline: #dedfdd;
  --focus: #245d91;
  --page-width: 1420px;
  --gutter: clamp(24px, 5.4vw, 96px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: "Suisse Intl", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
.skip-link {
  position: absolute;
  z-index: 10;
  top: -100px;
  left: 24px;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
}
.skip-link:focus { top: 16px; }
.site-shell {
  width: min(100%, var(--page-width));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-top: clamp(29px, 3.9vw, 63px);
}
.identity { display: inline-flex; flex-direction: column; gap: 7px; text-decoration: none; }
.identity-name {
  margin: 0;
  font-size: 33px;
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 400;
  white-space: nowrap;
}
.identity-role {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.6;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
}
.dot { margin-inline: .17em; }
.header-email {
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .19em;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 500;
  text-underline-offset: 5px;
}
.header-email:hover, .header-email:focus-visible { text-decoration: underline; }
.introduction {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr);
  /* Both columns share the same fixed top grid line, irrespective of copy height. */
  align-items: start;
  --lede-size: clamp(20px, 1.65vw, 24px);
  gap: clamp(36px, 4.8vw, 72px);
  padding-block: clamp(82px, 8.2vw, 139px) clamp(76px, 8vw, 124px);
}
.intro-copy { min-width: 0; }
/* Opening paragraph replaces the former large headline. */
.intro-lede {
  margin: 0 0 clamp(30px, 3.15vw, 44px);
  width: 100%; max-width: none;
  font-size: var(--lede-size);
  line-height: 1.32;
  letter-spacing: -.015em;
  font-weight: 400;
  color: var(--ink);
}
.biography { width: 100%; max-width: none; }
.biography p {
  margin: 0 0 1.2em;
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.5;
  font-weight: 400;
  color: var(--body);
}
.biography p:last-child { margin-bottom: 0; }
/* Align the image with the visible top of the opening paragraph’s first line,
   not the varying centre of the complete biography. The small offset tracks
   the heading font size at every desktop and tablet width. */
.portrait {
  margin: 0;
  align-self: start;
  margin-block-start: calc(var(--lede-size) * 0.18);
}
/* Where supported, trim the paragraph’s built-in leading for cap-height
   alignment and place the image on that exact same grid edge. */
@supports (text-box-trim: trim-start) and (text-box-edge: cap alphabetic) {
  .intro-lede { text-box-trim: trim-start; text-box-edge: cap alphabetic; }
  .portrait { margin-block-start: 0; }
}
.portrait picture { display: block; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: #e6e6e2; }
.portrait img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center; }
.portrait figcaption { margin-top: 11px; font-size: 11px; color: var(--muted); line-height: 1.5; }
.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  border-top: 1px solid var(--hairline);
  padding-block: 24px 34px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .015em;
}
/* Discreet Studio Wunda footer link. */
.studio-credit {
  color: var(--body);
  font-size: inherit;
  font-weight: 500;
  letter-spacing: .035em;
  text-decoration: none;
  white-space: nowrap;
}
a.studio-credit:hover, a.studio-credit:focus-visible {
  text-decoration: underline;
  text-underline-offset: 4px;
}
@media (max-width: 900px) {
  .introduction { gap: 35px; grid-template-columns: minmax(0,1.25fr) minmax(0,.87fr); }
  .introduction { --lede-size: clamp(20px, 2.6vw, 23px); }
  .biography p { font-size: 16px; line-height: 1.5; }
}
@media (max-width: 720px) {
  .site-header { gap: 15px; flex-wrap: wrap; }
  .identity { max-width: 100%; }
  .header-email { margin-left: auto; }
  .identity-name { letter-spacing: .18em; }
  .identity-role { letter-spacing: .14em; }
    .header-email { font-size: 10px; letter-spacing: .07em; }
  .introduction { grid-template-columns: 1fr; gap: 48px; padding-top: clamp(70px, 14vw, 100px); padding-bottom: 72px; }
  .introduction { --lede-size: clamp(20px, 4.3vw, 23px); }
  .intro-lede { width: 100%; max-width: none; }
  .biography { width: 100%; max-width: none; }
  /* The mobile stack is intentional; no desktop alignment offset here. */
  .portrait { max-width: 650px; margin-block-start: 0; }
}
@media (max-width: 390px) {
  .identity-name { letter-spacing: .13em; }
  .identity-role { letter-spacing: .09em; }
    .header-email { font-size: 10px; }
  .introduction { padding-top: 68px; }
  .introduction { --lede-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }