.morph-mark,
.morph-mark.is-visible {
  width: clamp(8rem, 13vw, 10rem);
  height: clamp(8rem, 13vw, 10rem);
  animation: none;
}

.morph-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.morph-svg path,
.morph-svg circle {
  fill: var(--gold);
}

.brand .brand-logo-light {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.theme-toggle {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  place-items: center;
  border: 1px solid var(--faint);
  border-radius: 50%;
  background: transparent;
  color: var(--stone);
  cursor: pointer;
  transition: background-color 160ms ease-out, border-color 160ms ease-out;
}

.theme-toggle:hover {
  border-color: var(--gold);
  background: var(--faint);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 0.25rem;
}

.theme-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.theme-icon-moon {
  display: none;
}

html[data-theme="light"] {
  color-scheme: light;
  --ink: #f5f2ea;
  --stone: #17233a;
  --gold: #987034;
  --muted: rgba(23, 35, 58, 0.64);
  --faint: rgba(23, 35, 58, 0.12);
  --grid: rgba(152, 112, 52, 0.09);
}

html[data-theme="light"] .brand-logo-dark,
html[data-theme="light"] .theme-icon-sun {
  display: none;
}

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

html[data-theme="light"] .process-card {
  background: rgba(255, 255, 255, 0.44);
}

html[data-theme="light"] .contact-card:hover {
  border-color: rgba(152, 112, 52, 0.65);
}

@media (max-width: 560px) {
  .header-actions {
    gap: 0.75rem;
  }

  .theme-toggle {
    width: 2.25rem;
    height: 2.25rem;
  }
}