/* Same palette as the site (tokens.css): black, white, gold #d6b668 and light gold #ffdf88, mixes only. */
@font-face {
  font-family: 'Sora Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/sora-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/assets/sora-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --black: #000000;
  --white: #ffffff;
  --gold: #d6b668;
  --gold-light: #ffdf88;
  --raised: color-mix(in srgb, var(--white) 8%, var(--black));
  --raised-hover: color-mix(in srgb, var(--white) 14%, var(--black));
  --muted: color-mix(in srgb, var(--white) 72%, var(--black));
  --rule: color-mix(in srgb, var(--white) 22%, var(--black));
  --font: 'Sora Variable', Sora, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--gold) 16%, var(--black)), var(--black) 70%) var(--black);
  color: var(--white);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
}

.card {
  width: 100%;
  max-width: 32rem;
  margin-inline: auto;
  padding: 3rem 1rem 2rem;
  display: grid;
  gap: 2rem;
}

.profile { display: grid; justify-items: center; text-align: center; gap: 0.5rem; }
.portrait {
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 15%;
  border: 3px solid var(--gold);
  margin-bottom: 0.5rem;
}
.name { margin: 0; font-size: 1.75rem; font-weight: 300; letter-spacing: -0.01em; line-height: 1.2; }
.name strong { font-weight: 700; }
.role { margin: 0; color: var(--gold-light); font-size: 0.875rem; font-weight: 600; }
.tagline { margin: 0; color: var(--muted); font-size: 0.9375rem; }

.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.link {
  display: grid;
  gap: 0.125rem;
  justify-items: center;
  text-align: center;
  min-height: 4rem;
  padding: 0.875rem 1.5rem;
  border: 2px solid var(--rule);
  border-radius: 999px;
  background: var(--raised);
  color: var(--white);
  text-decoration: none;
  transition: background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1), border-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.link:hover { background: var(--raised-hover); border-color: var(--gold); }
.link-title { font-weight: 700; font-size: 1.0625rem; line-height: 1.3; }
.link-sub { color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
.link-featured { background: var(--gold-light); border-color: var(--gold-light); color: var(--black); }
.link-featured .link-sub { color: color-mix(in srgb, var(--black) 72%, var(--gold-light)); }
.link-featured:hover { background: var(--gold); border-color: var(--gold); }

.social { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 0.75rem; }
.social a {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  color: var(--gold-light);
  border: 2px solid var(--rule);
  transition: border-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1), color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.social a:hover { border-color: var(--gold); color: var(--white); }
.social svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.social svg .fill, .social svg .dot { fill: currentColor; stroke: none; }

.footer { text-align: center; font-size: 0.8125rem; }
.footer a { color: var(--muted); }
.footer a:hover { color: var(--white); }

:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

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