:root {
  --radius: 16px;
}

/* Light: cream, white, and chestnut brown (female plumage) */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ebe3d8;
  --surface: #fffcf7;
  --text: #2a1f17;
  --muted: #6d5348;
  --surface-border: rgba(60, 45, 35, 0.1);
  --shadow: 0 14px 44px rgba(45, 32, 22, 0.09);
  --glow-a: rgba(139, 95, 65, 0.14);
  --glow-b: rgba(160, 110, 75, 0.1);
  --btn-primary: #7a5540;
  --btn-primary-hover: #5c3f30;
  --btn-secondary: #9a7a62;
  --btn-secondary-hover: #7d604c;
  --btn-email: #4d4338;
  --btn-email-hover: #3a3229;
  --link-fg: #fffaf6;
  --focus-ring: #5c4033;
  --toggle-bg: rgba(60, 45, 35, 0.08);
  --toggle-bg-hover: rgba(60, 45, 35, 0.13);
  --toggle-fg: #3d2e24;
}

/* Dark: black and deep green (male head and neck) */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0c0b;
  --surface: #121a16;
  --text: #e8ece9;
  --muted: #8fa396;
  --surface-border: rgba(180, 210, 195, 0.08);
  --shadow: 0 14px 48px rgba(0, 0, 0, 0.45);
  --glow-a: rgba(35, 95, 70, 0.22);
  --glow-b: rgba(20, 55, 42, 0.35);
  --btn-primary: #1e4a38;
  --btn-primary-hover: #2a624c;
  --btn-secondary: #2a3830;
  --btn-secondary-hover: #354840;
  --btn-email: #3d4a42;
  --btn-email-hover: #4d5c52;
  --link-fg: #f0f5f2;
  --focus-ring: #b8d4c4;
  --toggle-bg: rgba(255, 255, 255, 0.07);
  --toggle-bg-hover: rgba(255, 255, 255, 0.11);
  --toggle-fg: #dce8e0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -15%, var(--glow-a), transparent),
    radial-gradient(ellipse 90% 55% at 100% 100%, var(--glow-b), transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 2.5rem);
}

main {
  width: 100%;
  max-width: 36rem;
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid var(--surface-border);
}

.card-banner {
  margin: 0;
  line-height: 0;
}

.card-banner__img {
  display: block;
  width: 100%;
  height: auto;
}

html[data-theme="light"] .card-banner__img--dark,
html[data-theme="dark"] .card-banner__img--light {
  display: none;
}

.card-body {
  padding: clamp(1.75rem, 5vw, 2.5rem);
}

.profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.profile-header-text {
  min-width: 0;
  flex: 1;
}

.profile-avatar {
  width: clamp(3.25rem, 11vw, 4.5rem);
  height: clamp(3.25rem, 11vw, 4.5rem);
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: 0 2px 10px rgba(40, 28, 20, 0.12);
  background-color: var(--surface);
  background-image: url("avatar-light.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

html[data-theme="dark"] .profile-avatar {
  background-image: url("avatar-dark.png");
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);
}

.profile-header h1 {
  margin: 0 0 0.35rem;
  font-size: clamp(1.5rem, 4.5vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
  line-height: 1.35;
}

.subtitle .scientific {
  font-style: italic;
}

.lead {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-size: 0.98rem;
}

.footnote-ref a {
  text-decoration: none;
  font-weight: 600;
  color: var(--muted);
}

.footnote-ref a:hover,
.footnote-ref a:focus-visible {
  color: var(--text);
}

.footnote-ref a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

.footnote {
  margin: -0.35rem 0 1.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.footnote-mark {
  font-weight: 600;
  margin-right: 0.15em;
}

.fun-facts {
  margin: 0;
  padding-left: 1.35rem;
  font-size: 0.95rem;
  color: var(--muted);
}

.fun-facts li {
  margin-bottom: 0.65rem;
}

.fun-facts li:last-child {
  margin-bottom: 0;
}

.content-block {
  margin-bottom: 1.35rem;
}

.content-block:last-of-type {
  margin-bottom: 1.75rem;
}

.content-block h2 {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}

.content-block p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--muted);
}

.links {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

@media (min-width: 480px) {
  .links {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .links a {
    flex: 1 1 calc(50% - 0.4375rem);
    min-width: 10rem;
  }
}

.links a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  color: var(--link-fg);
  transition:
    transform 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
  min-height: 3.25rem;
  -webkit-tap-highlight-color: transparent;
}

.links a:active {
  transform: scale(0.98);
}

.links a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.links a.doc {
  background: var(--btn-primary);
  box-shadow: 0 4px 16px rgba(90, 60, 45, 0.28);
}

.links a.doc:hover {
  background: var(--btn-primary-hover);
  box-shadow: 0 6px 22px rgba(90, 60, 45, 0.34);
}

html[data-theme="dark"] .links a.doc {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .links a.doc:hover {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
}

.links a.wiki,
.links a.nzbo {
  background: var(--btn-secondary);
  box-shadow: 0 4px 14px rgba(55, 42, 32, 0.2);
}

.links a.wiki:hover,
.links a.nzbo:hover {
  background: var(--btn-secondary-hover);
  box-shadow: 0 6px 20px rgba(55, 42, 32, 0.26);
}

html[data-theme="dark"] .links a.wiki,
html[data-theme="dark"] .links a.nzbo {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .links a.wiki:hover,
html[data-theme="dark"] .links a.nzbo:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.links a.email {
  background: var(--btn-email);
  box-shadow: 0 4px 14px rgba(45, 38, 32, 0.22);
}

.links a.email:hover {
  background: var(--btn-email-hover);
  box-shadow: 0 6px 20px rgba(45, 38, 32, 0.28);
}

html[data-theme="dark"] .links a.email {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

html[data-theme="dark"] .links a.email:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}

.links a svg {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.theme-toggle {
  position: fixed;
  top: clamp(0.75rem, 3vw, 1.25rem);
  right: clamp(0.75rem, 3vw, 1.25rem);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--surface-border);
  border-radius: 12px;
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  cursor: pointer;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.theme-toggle:hover {
  background: var(--toggle-bg-hover);
}

.theme-toggle:active {
  transform: scale(0.96);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.theme-toggle svg {
  width: 1.35rem;
  height: 1.35rem;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

html[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

html[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

html[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

html[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* Bluesky Feed Creator “Powered by” (Bootstrap utility equivalents, no Bootstrap) */
.powered-by-bsfc {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.875em;
  line-height: 1.5;
  vertical-align: middle;
  transition: color 0.15s ease;
}

.powered-by-bsfc:hover {
  color: var(--text);
}

.powered-by-bsfc:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

.powered-by-bsfc .embed-powered-by__logo {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: block;
}

.powered-by-bsfc__line {
  color: inherit;
}

.powered-by-bsfc__name {
  color: var(--text);
  font-weight: 600;
}